How to Host an Angular Website Using Netlify and GitHub

November 21, 2022November 21, 2022 ZeroToHero 0 Comments

Host your Angular site for free with this simple process.

When hosting your Angular website online, you can choose between many available platforms. One of them you can use for free is Netlify.

If you store a copy of your website’s source code in a GitHub repository, you can use Netlify to host the website.

Netlify also automatically redeploys your site when you push any new changes to your hosted repository branch.

How to create a basic Angular application example

You can create a simple Angular application using an editor such as Visual Studio Code. You can then host the site with Netlify.

Create a new Angular application.

Create a simple home page.replace the code with application-components.html A file containing the following landing page content:

<div class="container-dark header">
<h2>Our Business Website</h2>
</div>
<div class="container-white">
<div class="content">
<h2>Our Business Website</h2>
<p>Learn how to design, develop, and maintain your professional website in no time.</p>
</div>
</div>
<div class="container-orange">
<div class="content">
<h2>What We Do</h2>
<p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
maintenance and other website related topics.</p>
</div>
</div>
<div class="container-white">
<div class="content">
<h2>About Us</h2>
<p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
visit us in person.</p>
</div>
</div>
<div class="container-dark footer">
<p>Copyright 2022</p>
</div>

Add some styling by adding some CSS to your Angular app app-components.css document:

* {
font-family: "Arial", sans-serif;
}
.header {
padding: 30px 50px;
}
.footer {
padding: 5px 50px;
text-align: center;
}
.container-dark {
background-color: 
color: white;
display: flex;
align-items: center;
}
.container-orange {
background-color: 
color: 
}
.container-white {
background-color: whitesmoke;
color: 
}
.content {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
align-items: center;
text-align: center;
}

Add some styling to the whole Angular application styles.css:
```
body {
margin: 0;
padding: 0;
}
```
To test an application, use a terminal or command line to navigate to its root folder.enter Serve Order:
```
ng serve
```
Wait for your code to compile, then visit http://localhost:4200/ in a web browser to view your application.

inside .browserslistrc file, remove iOS Safari versions 15.2-15.3. This will prevent compatibility errors from showing up in the console when building the project.

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3

use the construction Command in terminal:
```
ng build
```
inside .gitignore file, delete or comment out /distance Wire.removing it will ensure distance Folders are in the collection of files you push to your GitHub repository.




 How to Push Your Angular Code to GitHub
You will need to store your code in a remote repository for Netlify to access the source code.

You can create a new repository on GitHub, and push your website's code to that repository. If you are not familiar with GitHub, it might be useful to understand some of GitHub's basic features first.


 Create a new repository on GitHub. You can do this by logging in to GitHub and clicking on New.


   



 Enter the details for the new repository. Give it a name such as "netlify-app" and a description. Do not initialize a repository with a README file, .gitignore file, or license.


   



 In your computer's terminal, navigate to the directory where your Angular application is stored. Run the following command to initialize your folder as a git repository:
git init
git add .
git commit -m "first commit"


   



 Push the code in this folder to the new remote repository you created on GitHub.follow git remote add original, the branchand push Commands provided by GitHub on your remote repository page:
git remote add original <Your GitHub repo link>
git branch -M main
git push -u origin main


   



 You can confirm that your Angular application code is now in your remote GitHub repository by refreshing the GitHub repository page.


   






 How to host your code with Netlify
To host your code with Netlify, you need to give it access to your GitHub source code.Netlify will then use distance Angular project's folder to publish builds of the code.

You can configure all of these settings by following the configuration steps when creating a new site:


 Sign in or sign up for Netlify. You can do this with your GitHub credentials.


   



 On the main dashboard and site list page, expand the add new sitethen choose import existing project.


   



 choose GitHub.


   



 click Configuring Netlify on GitHub.


   



 click Install.


   



 Netlify will display a list of your GitHub repositories. Choose the one you want to host. For example, if you named your repository "netlify-app", select "netlify-app" from the list.


   



 In the configuration screen, keep the owner, branch to deployand base directory The default value for the field.If you are publishing to a specific branch, such as a separate "production" branch, you can add it to branch to deploy site.Change build command The field is "ng build".


   


 for Publish directory field, type dist/. If you don't know what the project name is, you can navigate to the project's dist folder to find it there. For example, "dist/netlify-app".


   



 click deployment site. 
 Wait for the deployment to complete. This may take a few minutes, and you may need to refresh the page. If all goes well, you will be able to see the deployment succeeded in the list of deployments. Click on the deployment you published, for example, Production: [email protected].


   



 click Open production deployment button.


   



 Now you can use URL in .netlify.app format View your website in another tab. If you host a website with multiple redirects, you may not be able to redirect to other pages. In this case, there is a way to fix failed redirects on Netlify. You can also modify your free domain name if desired.


   






 Host your website with GitHub and Netlify
Hopefully you are now successfully hosting your website with GitHub and Netlify. You can set up automatic deployments to certain branches of your GitHub repository. This way, you can automate and simplify the deployment of your website.

But Netlify isn't the only way you can deploy Angular applications online. You can also use other platforms such as GitHub Pages.