gitlab devops

Deploying an Angular app to netlify using Gitlab CI

Netlify is a pretty cool platform to develop, build, release and host your sites, and offers you a basic free account with the benefit of putting a site to prod at no cost.

Deploying an Angular app to netlify using Gitlab CI

Netlify is a pretty cool platform to develop, build, release and host your sites, and offers you a basic free account with the benefit of putting a site to prod at no cost. You don’t need to manage infrastructures and other scaling stuff, netlify will handle all those. It’s very useful when you need to deploy your app fast and easy.

We can deploy our Angular app following these steps:

  • Create an Angular project with Angular CLI
  • Create a Gitlab repository
  • Push project to Gitlab
  • Set up a Netlify project to point to your Github Repository
  • Set up Netlify to build and deploy

Let’s create an angular project, but first, make sure you had angular CLI to create an angular project.

npm install -g @angular/cli

I prefer you to go through Angular CLI docs.

ng new yourproject

Up to now, you have initiated an angular project. Let’s run the it using below commands.

cd yourproject
ng serve

Now, let’s use version control to track our code and push it to Gitlab.

If you are a new Verison control system, you can learn from my crash course.

Before tracking let’s create a Gitlab account and configured the project. You can create a blank repository and there will be some guidelines and links which you are required to use it.

git init
git remote add origin linkofyourproject
git add .
git commit -m "feat: Initial commit"
git push -u origin master

Alright, you finally pushed your code to Gitlab.

After we’ve done that, Netlify will build and deploy our application. Let’s go to app.netlify.com to get started. If you haven’t signed up for Netlify yet, go through the steps to create an account. Let’s create a new site in Netlify. You will first connect the new Gitlab repository to Netlify and choose the build options.

That was a relatively easy way to get our Angular application deployed. Finally, we have our site running. Let’s go to the site list to see one we have just created.


On this page


Category under

gitlab devops

Share this post




You might also like

Subscribe to new posts