# Using SSR without webpack

**URL:** <https://discourse.aurelia.io/t/using-ssr-without-webpack/3186>\
**Category:** Framework Knowledge\
**Created:** [January 25, 2020, 2:41pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186 "2020-01-25T14:41:13Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [January 25, 2020, 2:41pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/1 "2020-01-25T14:41:13Z")

</div>

I read the documentation about [SSR](https://aurelia.io/docs/ssr/introduction/) 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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 25, 2020, 9:39pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/2 "2020-01-25T21:39:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [April 23, 2020, 2:23am UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/3 "2020-04-23T02:23:45Z")

</div>

Hi! In that case, do you know how the instructions of the guide would change:  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/a/a0fbcdad365a97e137086b81ee56b8af583e2c3f.png)  
In my case, I’d be interested in using aurelia alameda if possible.  
Thanks for any insights.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 24, 2020, 6:58am UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/4 "2020-04-24T06:58:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [May 16, 2020, 4:05pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/5 "2020-05-16T16:05:16Z")

</div>

@bigopon did you have time to try it?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 17, 2020, 7:05am UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/6 "2020-05-17T07:05:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [May 22, 2020, 6:42pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/7 "2020-05-22T18:42:28Z")

</div>

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:

```auto
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:

```auto
// 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:

```auto
"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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 22, 2020, 10:54pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/8 "2020-05-22T22:54:10Z")

</div>

```auto
import { bootstrap } from 'aurelia';

```

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

---

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [May 23, 2020, 7:30am UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/9 "2020-05-23T07:30:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 23, 2020, 12:19pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/10 "2020-05-23T12:19:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [May 23, 2020, 1:04pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/11 "2020-05-23T13:04:43Z")

</div>

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):

```auto
  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`:

```auto
  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?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 23, 2020, 1:29pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/12 "2020-05-23T13:29:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 23, 2020, 1:37pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/13 "2020-05-23T13:37:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [May 23, 2020, 2:30pm UTC](https://discourse.aurelia.io/t/using-ssr-without-webpack/3186/14 "2020-05-23T14:30:29Z")

</div>

With this, I have the `self is not defined` error ☹