In this article, I'll show you how to build frontend JavaScript on GitLab CI. We will continue with the idea from the first article in the series, and we will add just enough logic to it so we can actually build something.

Code

The logic we are going to have is very simple - we will just default the date input field to the current date. src/index.js:

const dateInput = document.getElementById("date");

dateInput.value = new Date().toISOString().substring(0, 10);

On the HTML side, we will have src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Homework for life</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <h1>Homework for life</h1>

    <form>
      <input type="date" id="date" />
      <br />
      <textarea placeholder="Put your story" id="story"></textarea>
      <br />
      <button id="save">Save</button>
    </form>
  </body>
</html>

The main difference from the previews version is:

it's in src, not public
there are ids set across the file, so we can easily pick elements from the JS side

Webpack configuration

The application is built with webpack. The JS is defined as an application's entry point - webpack will start building JavaScript form there. index.html is used as HtmlWebpackPlugin template - the plugin will use it for generating the HTML file that imports the output JS. webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
};

Dependencies

For the build to run, we need to install the following dependencies:

$ npm install --save-dev html-webpack-plugin webpack webpack-cli

Build script

{
  ...
  "scripts": {
    ...
    "build": "webpack"

It will allow us to build with npm run build - it's useful when we replace building tools in the project, and we want to do it without learning to type a new command.

CI configuration

To update our build, we can set .gitlab-ci.yml to:

pages:
  image: node:14
  artifacts:
    paths:
      - public
  script:
    - npm ci
    - npm run build

pages: - job name needs to stay like this as we still want to deploy to GitLab Pages
image: node:14 - it picks Docker image capable of running our script. In this case, any modern node should work fine.
artifacts: ... - for pages deployment
scripts: - our build commands
- npm ci - install exact version of each package, as specifies in package-lock.json
- npm run build - the build script

Working build

If all went as expected, our CI run should look like this:

Summary

In this article, we have seen how to turn our simple deployment to GitLab Pages into building & deploying.

How to build frontend JavaScript on GitLab