Open in app

Sign in

Write

Sign in

From Scratch to Website Deployment- Automated Processes

Danifgrd
MCTW_TDW
Published in
6 min readDec 5, 2022

While developing a personal website or a personal project you might not feel the need to explore how would you deploy your website, because you may think that’s a process you only need to do once. This is wrong because this automation of processes has several advantages and can improve the quality of the website and improve developer skills. Not using automation processes to deploy your website is a bad practice because if the website needs a change or you want to implement a new feature you will have to do the deployment process all over again. This will cost a lot of time.

Therefore, this article is intended for developers who understand programming basics and are familiar with Git, but may not have heard of the automation of processes to deploy their website.

What is process automation with CI/CD?

Fig. 1 — CI/CD (Source: Red Hat)

CI/CD stands for continuous integration, continuous delivery, and continuous deployment. CI/CD is the solution that integrating new code can cause to DevOps teams (developers and operations teams are merged to work across the entire application lifecycle).

CI/CD introduces ongoing automation and continuous monitoring throughout the lifecycle of apps, from integration and testing phases to delivery and deployment. With all these steps together, these steps are usually called of CI/CD pipeline and are supported by DevOps teams working in an agile way. CI/CD pipelines can help you build, test, and deploy high-quality applications quickly.

Benefits of the DevOps approach:

  • Speed
  • Rapid Delivery
  • Reliability
  • Scale
  • Improved Collaboration
  • Rapid Feedback

How to get started with process automation?

There are a lot of options to integrate CI/CD processes, of course, you will need a repository to store your code and when you implement these processes if you have the rules they will run inside your repository, rules like running the testing stage in every commit or run all stages when you merge a branch to the main branch.

Fig 2 — Example of CI/CD lifecycle (Source: Zuru)

You can store your code in a private repository in Github or Gitlab for example, and then you will need to get the tools to create the pipelines to run, tools like GitHub Actions, Gitlab CI, Jenkins, Circle CI, and a lot more.

For a starter, I would recommend Gitlab CI because for the target audience of this project it will be easier to understand what’s going on in the pipeline since the language to write a pipeline on Gitlab it’s easy to learn and it’s very understandable.

Let’s Bring It to Life

In this use case, we will build a Gitlab pipeline that goes through several stages, like installation, validation (Eslint, Prettier, testing), building, and finally deploying a React App on Netlify.

Firstly we will need to surpass some pre-requisites:

  • Create a Gitlab repository to store our code and to place our pipeline.
  • Run the command npm run build on your React app and this will generate a folder called build. To deploy the app you will need to drag and drop this folder in the Netlify website in the Sites tab.
  • (Optional) You can create a private domain on Netlify.
  • Store 2 values, SiteID, available on the site created on Netlify and Personal Acess Token, that can be generated here.
  • Add the dependency netifly-cli to your React app, using the command npm install netlify-cli.

After surpassing these requisites we need to create a .gitlab-ci.yml file on our Gitlab repository.

In this file, you define:

  • The structure and order of jobs that the runner should execute.
  • The decisions the runner should make when specific conditions are encountered.
Fig. 3 — Image dependency

As you want to deploy a React app, you will need to run commands like npm install, for example, and for that we need to have a dependency in the pipeline that makes this possible, with the use of the latest node version image.

Fig. 4 — Stages of the pipeline

As it was said, Gitlab pipelines are very easy to understand and with the code presented on Fig. 5, we can tell that these are the stages that will run on the pipeline and with this order (in case no rule is applied). Note that this is only representative and can be different names and more or less stages.

Fig. 5 — Install Stage

The first stage presented is the installation stage. These steps will install the dependencies that our React app needs and it will stored them in the node_modules file.

Fig. 6 — Validation Stage

In the validation stage it’s optional what do you want to validate. In this case lint, prettier and a testing stage where chosen.

Fig. 7 — Build and Deploy stage

In this last two stages, we applied some rules like, $CI_COMMIT_REF_NAME == "main" , which means that these stages only activate when the commit is done to the main branch. On the build stage the npm run build command will generate a folder build/ that we will use to deploy our app in Netlify through the command npx netlify-cli deploy --site $NETLIFY_SITE_ID --auth $NETFLIFY_AUTH_TOKEN --prod. But be careful, for the pipeline not to fail you need to create a file netlify.toml and add the following content:

Fig. 8 — Content to add to netlify.toml file

This is a very important step so that when running the command npx netlify-cli deploy --site $NETLIFY_SITE_ID --auth $NETFLIFY_AUTH_TOKEN --prod , this command knows what folder to get to make the deploy of that folder that was generated when running the npm run build command.

The variables $NETLIFY_SITE_ID and $NETFLIFY_AUTH_TOKEN are generated in Netlify and are personal, so they need to be stored as secrets in the Gitlab website.

To save your variables in the Gitlab environment, you need to go to Settings -> CI/CD -> Variables and then store your variables as secrets.

Fig. 9 — Environment Variables

This is also a very important step, because if you don’t have these variables stored as secrets in your Gitlab repository, when the pipeline runs the deploy stage, in case you don’t have the values stored the pipeline won’t be able to find them and it will fail.

If everything was followed step by step, you most likely to have your website deployed and all of this using automated processes.

Conclusion

To increase the speed and the rapid deliveries of your website, you need to implement these automated processes and in case some issue appear on your app or you want to add new features it will be a lot easier if you have these implemented because it will save a lot of time.

It will increase the reliability of the website as well due to the validation stage, it will check for errors or in the case of having tests it will make sure that all tests are passing and the website can go in the production.

References

Ci Cd Pipeline
React
Netlify
Deployment
Automation

--

--

Danifgrd
MCTW_TDW

Written by Danifgrd

0 Followers
Writer for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams