Using SSR without webpack

Framework Knowledge
1

I read the documentation about SSR and from what I understand, I need to use webpack to use SSR. Sadly my project isn’t currently using webpack. Do I have to switch to use SSR? I searched github and this forum but couldn’t find the information.

1 Like
2

I don’t think you need to use webpack for this. As long as the loader is compatible, it will work just fine I believe

1 Like
3

Hi! In that case, do you know how the instructions of the guide would change:
image
In my case, I’d be interested in using aurelia alameda if possible.
Thanks for any insights.

1 Like
4

Hmm, actually I need to try it before i can answer that. Maybe give me a bit time

5

@bigopon did you have time to try it?

1 Like
6

I havent tried it. Maybe next weekend ill be able to investigate this.

7

I tried to test this. Taking inspiration from the webpack skeleton, I:

  1. Installed the required dependencies.
  2. Defined a file named server.js with this content to run the SSR server:
const Koa = require('koa');
const path = require('path');
const {aureliaKoaMiddleware} = require('aurelia-middleware-koa');

var port = process.env.PORT || 8080;

const app = new Koa();
const bundle = './scripts/server-bundle';

app.use(aureliaKoaMiddleware({
  preboot: true,
  bundlePath: require.resolve(bundle),
  template: require('fs').readFileSync(path.resolve('./index.ssr.html'), 'utf-8')
}, {
  main: () => {
    delete require.cache[require.resolve(bundle)];
    return require(bundle);
  }
}));

app.use(require('koa-static')(path.resolve(__dirname)));
app.use(require('koa-static')(path.resolve(__dirname, 'dist')));

console.log('Starting server....');
app.listen(port);
console.log(`Listening at http://localhost:${port}/`);

process.on('unhandledRejection', error => {
  console.log('unhandledRejection', error.message);
  console.log(error.stack);
});
  1. Added a new main for the server:
// regenerator-runtime is to support async/await syntax in ESNext.
// If you target latest browsers (have native support), or don't use async/await, you can remove regenerator-runtime.
import 'regenerator-runtime/runtime';
import 'bootstrap';
import environment from './environment';
import { bootstrap } from 'aurelia';

async function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  await aurelia.start();
  await aurelia.setRoot('app');
}

module.exports = bootstrap(configure);
  1. Update the bundles config:
"bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "**/*.{js,json,css,html}"
        ],
        "exclude": [
          "**/server-main.js"
        ]
      },
      {
        "name": "server-bundle.js",
        "source": [
          "**/*.{js,json,css,html}"
        ],
        "exclude": [
          "**/main.js"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/whatwg-fetch/dist/fetch.umd.js",
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/requirejs/require.js"
        ],
        "dependencies": [
          "aurelia-bootstrapper",
          "aurelia-loader-default",
          "aurelia-pal-browser",
          {
            "name": "aurelia-testing",
            "env": "dev"
          },
          "text"
        ]
      }
    ],

Problems:

  1. Despite the exclude, I can’t build the project if server-main.js is there. I have this error:
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 5.13.0     @fortawesome/fontawesome-free
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of aurelia:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "aurelia"
ERROR [Bundler] Unable to analyze aurelia
INFO [Bundler] Error: Unable to find package metadata (package.json) of aurelia
ERROR [Bundler] Failed to add Nodejs module aurelia
INFO [Bundler] Error: Unable to find package metadata (package.json) of aurelia
  1. If I manages to build by removing this script, server-bundle.js is empty.

Any ideas on how to proceed from now? I am switch my app to webpack but I’d like to avoid it for now.

1 Like
8 
import { bootstrap } from 'aurelia';

It should from aurelia-bootstrapper.
Npm package “aurelia” is for Aurelia 2.

1 Like
9

Thanks. That fix the building part! The server bundle is still empty though.

1 Like
10

The server bundle tries to capture local files, but they were all captured by app bundle. Cli bundler does not duplicate same file in more than one bundle files.

You can try removing server bundle setup, just use app bundle (without excludes). There is no problem to bundle two main files in one bundle. Because (I assume) you are explicitly loading different main in browser and nodejs.

1 Like
11

Now, I have two new errors.

  • When I try to use vendor-bundle as the bundle for SSR, I get (when I open the server page in the nodeJS console):
  ReferenceError: self is not defined
      at /home/jenselme/Downloads/autest/scripts/vendor-bundle.js:8:40
      at /home/jenselme/Downloads/autest/scripts/vendor-bundle.js:2:66
      at Object.<anonymous> (/home/jenselme/Downloads/autest/scripts/vendor-bundle.js:5:2)
      at Module._compile (internal/modules/cjs/loader.js:955:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
      at Module.load (internal/modules/cjs/loader.js:811:32)
      at Function.Module._load (internal/modules/cjs/loader.js:723:14)
      at Module.require (internal/modules/cjs/loader.js:848:19)
      at require (internal/modules/cjs/helpers.js:74:18)
      at Object.main (/home/jenselme/Downloads/autest/server.js:17:12)
  • When I try to use app-bundle:
  ReferenceError: define is not defined
      at Object.<anonymous> (/home/jenselme/Downloads/autest/scripts/app-bundle.js:1:1)
      at Module._compile (internal/modules/cjs/loader.js:955:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
      at Module.load (internal/modules/cjs/loader.js:811:32)
      at Function.Module._load (internal/modules/cjs/loader.js:723:14)
      at Module.require (internal/modules/cjs/loader.js:848:19)
      at require (internal/modules/cjs/helpers.js:74:18)
      at Object.main (/home/jenselme/Downloads/autest/server.js:17:12)
      at start (/home/jenselme/Downloads/autest/node_modules/aurelia-ssr-engine/dist/commonjs/aurelia-ssr-engine.js:49:22)
      at Object.render (/home/jenselme/Downloads/autest/node_modules/aurelia-ssr-engine/dist/commonjs/aurelia-ssr-engine.js:25:12)

Maybe I’m not using the right one? Maybe it is an issue with the entry point?

1 Like
12

I never used ssr, probably couldn’t help much.

The cli bundler produced is an AMD bundle, work in AMD requirejs env.

The app bundle only contains AMD modules (many define(...)), but has no requirejs to provide that define func. That’s one of the issue you see.

The vendor bundle got the requirejs to setup AMD env. But lots of code assume browser environment. I don’t know what code uses self (the global name in web worker env). I never tried to load up an AMD bundle in nodejs env, it could be very troublesome because the file is generated for browser to consume.

1 Like
13

Wait. That code split (app and vendor bundle) wouldn’t work in nodejs env because requirejs doesn’t know how to remote fetch app bundle.
Try removing app bundle setup, bundle everything in vendor bundle.

1 Like
14

With this, I have the self is not defined error :frowning: