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, notpublic - 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 inpackage-lock.json -
- npm run build- the build script
Working build
If all went as expected, our CI run should look like this:
Links
Summary
In this article, we have seen how to turn our simple deployment to GitLab Pages into building & deploying.
Top comments (0)