Sekrab Garage

Webpack config

Angular Universal on Firebase hosting webpack to place in dist folder

AngularFirebase September 1, 20
Subscribe to Sekrab Parts newsletter.

When creating an angular universal app and hosting it on firebase, you need to change the location of the dist folder to automate the build process. Some create a task to move the file after build, I change the webpack config:

 module.exports = { 
   // ...
   output: {
        path: path.join(__dirname, '../project.host/functions'),
        filename: '[name].js'
    },
 }

The generated file of the build process in `dist/main.js` is not needed for either client nor server side rendering. So keep it as it is in angular.json under "server" config.

 {
 "server": {
   "builder": "@angular-devkit/build-angular:server",
      "options": {
          "outputPath": "dist"
      }
  }
 }

Place the build output in public folder of firebase, in this case it is a "../project.host/functions/public". The ssr function won't work if the public html is outside the function root folder. So place them all in the same directory.