In this article, I will show you how to link your Angular app repo with a server. So whenever you push your changes to a specific branch, the server will automatically build and configure your app based on the scripts you defined and publish the app on the fly.
1. Creating an Angular App using Angular CLI
Or you can download the final result HERE
ng new angular-ci-app
Make sure to choose
Yes
when it asks you to create the app with the Routing.
2. Creating a new GitHub Repo.
If you wonder why my GitHub is on a dark theme check this Chrome extension
3. Open your created app on VS Code
Open the terminal and push your app to the newly created repo
git remote add origin https://github.com/<Your-User-Name>/<Repo-Name>.git
git branch -M master
git push -u origin master
4. Cleaning up and Adding a simple app with Routes.
- Open App.Component.html and delete everything inside and paste the following code.
App.Component.html
<style>
button {
margin-right: 20px;
}
</style>
<button routerLink="/home">Home</button>
<button routerLink="/about">about</button>
<router-outlet></router-outlet>
- Open app-routing.module.ts and paste the following code
app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./components/home/home.component";
import { AboutComponent } from "./components/about/about.component";
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{
path: "home",
component: HomeComponent,
},
{
path: "about",
component: AboutComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
- Create a new folder inside the app folder and name it components and create the
Home
and theAbout
components.
- Push your changes to the repo
git add .
git commit -m "creating routes"
git push
5. Linking the repo to Netlify
Create a new account on Netlify and follow along with me.
- Click on New Site From Git Button
- Choose GitHub Option
Netlify will ask for permission
- Search for your repo name
- Pick a branch to deploy
The selected branch will be the one which Netlify will be listening on it and whenever you push a change to it Netlify will build your app based on the configuration we will make below.
So, I will choosemaster
for now which is the only branch we currently have.
- Build command
Type the build command of your app, In our case, it will be
ng build
- Publish Directory
By default Angular build your application inside a
dist
folder
and will create another folder inside of it with thename
of your app (You will find it insidepackage.json
) in my case itsangular-ci-app
So, I will typedist/angular-ci-app
- Finally, Click on Deploy Site.
6. Previewing your app
By default Netlify will give a dummy URL name of your app, You can change it if you want from Site Settings
7. Fixing 404 Page Issue
If you copy the URL with any route for example /home and paste it, this will redirect you to the 404 page.
To solve this problem we have two solutions.
First Solution:
Create _redirects
file inside src
folder and paste the following line:
/* /index.html 200
then open angular.json
file search for the assets array => projects > architect > options > assets
and add "src/_redirects"
angular.json
"projects": {
//...
"architect": {
"build": {
//..
"options": {
//..
"assets": ["src/favicon.ico", "src/assets", "src/_redirects"],
Second Solution:
Put { useHash: true }
as a second argument for the forRoot
function inside app.routing.module
as the following
// ...
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
// ...
This will prefix the routes by adding #.
So, the routes will be something like http://localhost:4200/#/home
8. Pushing to the master branch and watch for the changes.
git add .
git commit -m "fixing 404 page"
git push
Go to Netlify and you will find it started to build your app again automatically.
Now, when you copy and paste the URL you will no longer be directed to the 404 page.
See my final Result https://angular-ci.netlify.app/#/home
Tips
I will tell you some tips that I personally use on my own projects
- I usually create a
demo
branch and link this branch to Netlify. - I create another branch
dev
and I commit and push my changes on it and when I want to publish my changes to the client I merge thedev
branch into thedemo
branch and push the changes.
Top comments (6)
Nice, you can also use netlifyās built in redirects to prevent 404s and avoid horrible #s in urls lol
Hey Dan!
I updated the article by adding the
_redirects
file as you recommended ^_^.Great! Nice job on the article and appreciate you updating it :)
Nice! I didn't know about it, I will take a look!
Thanks so much. This helped me.
Can somebody help me with using the environment.ts file during deployment since it gets ignored when committing, however my build fails on netlify since I import the same in my code ?