Skip to content

Latest commit

 

History

History
41 lines (26 loc) · 2.03 KB

Build-Process.md

File metadata and controls

41 lines (26 loc) · 2.03 KB
Raw

Build Process

The build process is carried out by webpack

There are two build process, one for the client and one for the server.

You can start the build process with npm/yarn run build. You can also run only the client or the server build process with yarn run build:client, yarn run build:server.

Building a Docker Image

@Gingernaut proposed this PR where you can find an example Dockerfile to run and build the project.

Build Variables

Specify the BUILD_LANGUAGE environment variable (two letter language code defined in config.js) to build the project for a different language, by default BUILD_LANGUAGE is en.

BUILD_LANGUAGE=it yarn run build

Exploring the build process

Common build process

  • Source javascript files get linted
  • Source javascript files get transpiled to browser-compatible javascript via babel
  • Vue components get compiled via vue-loader
  • Resources such as images get included in source files if they are small enough, otherwise they are copied to the dist/ folder by file-loader
  • Style gets linted via stylelint
  • Localization is carried out for HTML/pug templates

Client build process

  • Everything in the common build process
  • A Service Worker is generated for caching and offline support
  • The main bundle (app.js) gets split in three parts, vendor.js for dependencies, manifest.js for Webpack-related code, and app.js only for the code we wrote. This will allow you to change the app code without the need for the user to redownload all the external depedencies again, which is what would happen if you had a single bundle.
  • Javascript gets uglified and minified
  • An index.html file is built

Server build process

  • Everything in the common build process
  • Some files needed for SSR are created