How to build frontend JavaScript on GitLab
Tags: javascript, gitlab, webpack
Published: 2021-09-03 08:27:01

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](https://how-to.dev/how-to-deploy-an-application-to-gitlab-pages), 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`:
```JS
const dateInput = document.getElementById("date");

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

On the HTML side, we will have `src/index.html`:
```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`:
```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:
```shell
$ npm install --save-dev html-webpack-plugin webpack webpack-cli
```

## Build script
```JSON
{
  ...
  "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:
```yml
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:
![build.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qb724tgpljkbb1ff77l.png)

# Links
* [repository](https://gitlab.com/how-to-dev/homework-for-life-vanilla/)
* [branch](https://gitlab.com/how-to-dev/homework-for-life-vanilla/-/tree/deploy-to-pages)
* [free webpack course](https://www.udemy.com/course/beginners-course-for-webpack-5/?referralCode=CF61F1A7C095ED2A63B8)
* [pre register for free GitLab video course](https://www.subscribepage.com/free_gitlab_course)

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