How to Host an Angular Website Using Netlify and GitHub

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.

  1. Create a new Angular application.
  2. 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 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 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 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 class="container-dark footer">
    <p>Copyright 2022</p>
  3. 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 {
    color: white;
    display: flex;
    align-items: center;
    .container-orange {
    .container-white {
    background-color: whitesmoke;
    .content {
    padding: 100px 25%;
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    font-size: 1.2em;
    align-items: center;
    text-align: center;
  4. Add some styling to the whole Angular application styles.css:
    body {
    margin: 0;
    padding: 0;
  5. To test an application, use a terminal or command line to navigate to its root folder.enter Serve Order:
    ng serve
  6. Wait for your code to compile, then visit http://localhost:4200/ in a web browser to view your application.
    Angular application in Chrome for our business website

  7. 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
  8. use the construction Command in terminal:
    ng build
  9. 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.
    Open the .gitignore file in Visual Code

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.

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

  2. 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.
    Create new GitHub repository details

  3. 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"
    Git bash initialize repo command

  4. 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
    GitHub push to remote repo command

  5. You can confirm that your Angular application code is now in your remote GitHub repository by refreshing the GitHub repository page.
    The remote repository page of the website on GitHub

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:

  1. Sign in or sign up for Netlify. You can do this with your GitHub credentials.
    Welcome to the Netlify page in your browser

  2. On the main dashboard and site list page, expand the add new sitethen choose import existing project.
    Import existing projects on Netlify

  3. choose GitHub.
    Importing Git repositories and other options on Netlify

  4. click Configuring Netlify on GitHub.
    Configure Netlify on GitHub Button

  5. click Install.
    Install Netlify for GitHub Pages

  6. 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.
    List of existing GitHub repositories you can host

  7. 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".
    Site Setup and Deployment on Netlify

    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".

    The dist folder on the GitHub repository site

  8. click deployment site.
  9. 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].
    Site details page on Netlify

  10. click Open production deployment button.
    Site details page on Netlify

  11. Now you can use URL in 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.
    Websites hosted on Netlify in your browser

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.

Leave a Reply

Your email address will not be published. Required fields are marked *