Skip to content

A guide to creating a simple single-spa app with webpack for the first time

Notifications You must be signed in to change notification settings

dvnrsn/single-spa-webpack-setup

Repository files navigation

single-spa-webpack-setup

A guide to creating a simple single-spa app with webpack for the first time

Single-spa app based on step-by-step guide on medium

Webpack v4.20

Assumptions

  • Package.json create/update (yarn init) with defaults
  • webpack, webpack-dev-server and webpack-cli in devDependencies
  • Cool app setup (minus the angular code at end) step-by-step guide on medium
    • Note: update declareChildApplication to registerApplication in root-application.js

Webpack

Let’s start with by creating a pretty basic webpack.config.js as per webpack getting started:

const path = require('path');

module.exports = {
  mode: 'development', // do this or you might get cryptic errors
  devtool: 'source-map',
  entry: './root-application.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Let’s add two scripts to package.json

"scripts": {
  "build": "webpack",
  "watch": "webpack-dev-server"
}

Now terminal

yarn build

You should now have two files in the dist directory

At this point, when we run yarn watch we’re going to be getting an error about “import” only being allowed in top level modules. Note that in root-application.js we are using said "import" inside of loadCoolApp() rather than at the top of the page. This is what is called a Dynamic Import and we'll need to handle it via the magic that is Code Splitting in Webpack.

Let's add the following line to webpack config:

filename: 'main.js',
+ chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),

Also adjust loadCoolApp() to look like:

return import(/* webpackChunkName: "cool-app" */'./cool-app/cool.app.js')

We should now see Hello Justin! In the browser if we navigate to localhost:8080/#/cool

Potential errors

You might have a cryptic error, something like

Uncaught TypeError: Application 'cool-app' died in status LOADING_SOURCE_CODE: Cannot read property 'call' of undefined at o (bootstrap:63)

Do not try to make sense of this. Rather, first add mode: ‘development’ to webpack.config.js module.exports object That might solve all your problems, including the need to continually yarn build prior to yarn watch. If not, try adding publicPath: ‘/dist/’ and devServer: {publicPath: ‘/dist/’}

About

A guide to creating a simple single-spa app with webpack for the first time

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published