DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Originally published at how-to.dev

How to build frontend JavaScript on GitLab

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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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",
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

Dependencies

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

$ npm install --save-dev html-webpack-plugin webpack webpack-cli
Enter fullscreen mode Exit fullscreen mode

Build script

{
  ...
  "scripts": {
    ...
    "build": "webpack"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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:
build.png

Links

Summary

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

Discussion (0)