D2 App Base

Shared configuration package for DHIS2 apps using Webpack & Babel.

Getting started

Start by removing Webpack, HtmlWebpackPlugin and D2 Manifest. Since D2 App Base includes these dependencies, it's best not to include them in your app as well. That way you don't risk ending up with multiple versions of the packages in your node_modules.

yarn remove webpack html-webpack-plugin d2-manifest eslint eslint-config-dhis2

Or:

npm remove --save webpack html-webpack-plugin d2-manifest

Then install this package:

yarn add d2-app-base or npm install --save d2-app-base

After all dependencies have been installed, the post-install script will create the following NPM scripts:

• start: Starts webpack-dev-server on localhost port 8081 (by default)
• build: Packages the app into the build/ folder. This also runs prebuild and postbuild which will clean up any previous builds, validate and lint your code, and copy additional files.
• deploy: Deploy a new version of the app to Sonatype. This runs the build script first.

At this point, if you're lucky everything will just work. Start the dev server with yarn start (or npm start), bump the version number with yarn version, and deploy new versions of your app with yarn deploy.

More likely you'll have to make some small adjustments to the webpack config (webpack.config.js), the html template (index.html) or the npm scripts (package.json). For example you may have to adjust the postbuild script in package.json to ensure that all the necessary files are copied to the build/ folder. Note: You shouldn't copy index.html since this will be generated by HtmlWebpackPlugin.

You may also have to fix a ton of eslint errors. Please do fix them rather than disabling the linting, but feel free to suggest changes to the eslint config if certain rules are causing problems. You may also override the rules in each repo/folder by changing .eslintrc

Webpack config

By default, webpack will use ./src/index.js as the entry point of your app, and the name of the output bundle will be [name]-[hash].js, where [name] will be replaced with the name of your entry point (defaults to "main") and [hash] will be replaced with a unique hash. Since the filename can't be known ahead of time, the HTML Webpack plugin is used to generate an index.html that loads the correct file(s).

The default webpack config simply calls makeWebpackConfig() which is defined in makeWebpackConfig.js. If you need to make changes to the webpack config, you can simply alter the object returned by this function. For example you can generate two output bundles by replacing the entry member:

const makeWebpackConfig = require('d2-app-base/makeWebpackConfig');

const webpackConfig = makeWebpackConfig(__dirname);

webpackConfig.entry = {
    'app': './src/app.js',
    'map': './src/map.js'
};

module.exports = webpackConfig;

Dependencies

This package includes certain dependencies on behalf of your app. If your app includes different versions of these dependencies you may end up with multiple versions in your node_modules folder. This can lead to weird bugs and unpredictable behavior.

Therefore, it's recommended that you remove the following dependencies from your app:

• webpack
• html-webpack-plugin
• d2-manifest
• eslint
• eslint-config-dhis2