# 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](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
Homework for life
Homework for life
```
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:
# 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.