stage-webpack

Webpack bundling processes desgined to work well with Stage / Studio environment

Installation

This is installed automatically if you use @crasman/create-stage-webpack to create new project, also the configuration is taken care of.

To install manually run npm install stage-webpack --save-dev

Configuration

Config file (stage-webpack.config.js) needs to be found in project root folder. See config documentation

You also need to setup linters and build process configuration. Click links for examples on how to use and extend stage-webpack defaults:

• babel: babel.config.js
• postcss: postcss.config.js
• eslint: .eslintrc
• stylelint: .stylelintrc.js

These files should be stored in the root of your project.

Service worker setup

If defined (config.files.serviceWorker), we expect to find self.__WB_MANIFEST in the service worker file for precaching built assets. Example service-worker.js setup

Extending stage-webpack.config.js

You can extend project settings with local ones by placing another stage-webpack.config.js file outside of the project folder. This way you can generate valid SSL certificate that you can use for all your stage-webpack dev servers.

Scripts

• stage-webpack start: Start dev server. Change proxy target with --sw-stage-url <config.stage.urls[target]>. E.g. stage-webpack-scripts start --sw-stage-url admin
• stage-webpack build: Build files and upload to Studio
• stage-webpack watch: Dev version of build. Should only be used when dev server can't be used, for example when developing Prince XML which requires that server has access to needed files.
• stage-webpack update-project: Can be used to apply automatic fixes to source files if there are any available

Client environment variables

Exposed to client:

• PUBLIC_PATH: Can be used to register service worker etc.
• NODE_ENV: 'production', 'development' or 'test'
• DEV_SERVER: undefined or 'true'
• SW_<anything>: Any env variable prefixed with SW_ can be used in client code. E.g SW_TEST = 'test' can be accessed with process.env.SW_TEST

Development

Linking to test project for Webpack testing

Link @crasman/stage-webpack

Just run npm link inside packages/stage-webpack folder

Link to your test project

This is little tricky to link thanks to how npm link now works (>= 7.0.0). Step 4 works around this new limitation by installing all other monorepo packages as dependencies.

1. Go to your project's folder
2. Switch to same Node version as you use for @crasman/stage-webpack developing
3. Remove node_modules and package-lock.json and run npm install if you needed to change Node version
4. npm install @crasman/babel-preset-stage-webpack @crasman/branch-bar @crasman/eslint-config-stage-webpack @crasman/stylelint-config-stage-webpack
5. npm link @crasman/stage-webpack
6. Start testing Webpack functionality