Excursion: Set up javascript development in the demo project

📘
Setting up javascript development in the demo project
Our demo project uses a very basic typescript and webpack setup to bundle all frontend code together and get it deployed to Heroku. If you are following along the demo project you will have to set up the build task for our javascript code.
If you are using your own setup you can skip the next steps.

You may just checkout the demo project's branch and run npm install.

Or, if you want to do it by hand:

Install the needed development dependencies:

# Install webpack, typescript and the respective loaders.
npm install -D webpack webpack-cli typescript ts-loader copy-webpack-plugin

# Initialize the typescript project
./node_modules/typescript/bin/tsc --init

# Create a webpack config file
touch webpack.config.js

# Create a basic typescript file
mkdir src
cd src
touch index.ts

This basic webpack configuration bundles our /public folder and compiled JavaScript into a new /dist folder.

const path = require( 'path' );
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    module: {
        rules: [
            {
                test: /\.tsx?/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [{
                from: path.resolve(__dirname, 'public'),
                to: path.resolve(__dirname, 'dist/')
            }]
        })
    ]
};

Adapt our index.js to serve from the new /dist folder.

// ...
// use the express-static middleware
app.use(express.static(path.join(__dirname, 'dist')))
// ...

Add a build task to our package.json which is automatically run by Heroku.

"scripts": {
    "start": "node index.js",
    "build": "webpack"
  },

Add /dist/ to your .gitignore

Build, run, deploy

To test your site locally you will now have to run npm run build; npm run start;. This will create all static content in the /dist folder from where it will be served by express. Deploying to Heroku will do exactly the same.

📘Setting up javascript development in the demo project

Build, run, deploy

📘
Setting up javascript development in the demo project