How to Host an Angular Website Using Netlify and GitHub

Date:

Share post:


Host your Angular site for free using this easy process.


When hosting an Angular website online, you can choose between many available platforms. One of these that 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 that site.

Netlify also automatically redeploys your site when you push any new changes to the repository branch that you are hosting.


How to Create a Basic Example Angular App

You can create a simple Angular application using an editor such as Visual Studio Code. You can then host this website using Netlify.

  1. Create a new Angular app.
  2. Create a simple home page. Replace the code in the app.component.html file with 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>
  3. Add some styling to the Angular app by adding some CSS to the app.component.css file:
    * {
    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;
    }
  4. Add some styling for the overall Angular app in styles.css:
    body {
    margin: 0;
    padding: 0;
    }
  5. To test the app, navigate to its root folder using a terminal or command line. Type the ng serve command:
    ng serve
  6. Wait for your code to compile, and visit http://localhost:4200/ in a web browser to view your app.
    Our business website Angular app in Chrome
  7. In the .browserslistrc file, remove iOS safari version 15.2-15.3. This will prevent compatibility errors from showing in the console when you build 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. Build your code using the ng build command in the terminal:
    ng build
  9. In the .gitignore file, remove or comment out the /dist line. Removing it will ensure the dist folder is in the set of files that you push to your GitHub repository.
    gitignore file open 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 your new repository. Give it a name such as "netlify-app", and a description. Do not initialize the repository with a README file, .gitignore file, or license.
    Create new GitHub repo details
  3. In a terminal on your computer, navigate to the directory where you stored your Angular app. Run the following commands to initialize your folder as a git repository:
    git init
    git add .
    git commit -m "first commit"
    Git bash init repo commands
  4. Push the code inside this folder to the new remote repository you made on GitHub. Follow the git remote add original, git branch, and git 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 commands
  5. You can confirm that your Angular app code is now in your remote GitHub repository by refreshing the GitHub repository page.
    Remote repository page for website on GitHub

How to Use Netlify to Host Your Code

To host your code using Netlify, you will need to give it access to your GitHub source code. Netlify will then use the dist folder of your Angular project to publish the built version of your code.

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

  1. Log in or sign up to Netlify. You can do so using your GitHub credentials.
    Welcome to Netlify page in browser
  2. From the main dashboard and site list page, expand Add new site, and select Import an existing project.
    Import existing project on Netlify
  3. Select GitHub.
    Import Git repo and other options on Netlify
  4. Click on Configure Netlify on GitHub.
    Configure Netlify on GitHub button
  5. Click on Install.
    Install Netlify for GitHub page
  6. Netlify will display a list of your GitHub repositories. Select the one that you'd like to host. For example, if you have named your repository "netlify-app", then select "netlify-app" from the list.
    List of existing GitHub repositories that you can host
  7. In the configuration screen, leave the Owner, Branch to deploy, and Base directory fields at their default values. If you were publishing a specific branch, such as a separate "Production" branch, you could add that into the Branch to deploy field. Change the Build command field to "ng build".
    Site settings and deployment on Netlify

    For the Publish directory field, type dist/<your project name>. If you do not know what the project name is, you can navigate to the dist folder of your project to find it there. For example, "dist/netlify-app".

    dist folder on GitHub repository site
  8. Click on Deploy 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 successful deployment in the deployments list. Click on your published deployment, for example, Production: [email protected].
    Site details page on Netlify
  10. Click on the Open production deploy button.
    Site details page on Netlify
  11. Now you can view your website in another tab, using a URL in the format of <generated-subdomain>.netlify.app. If you're hosting a website with multiple redirects, you may not be able to redirect to other pages. In this case, there is a way to fix a failing redirect on Netlify. If you want, you can also modify your free domain name.
    Website hosted on Netlify in browser

Hosting Your Website Using GitHub and Netlify

Hopefully, you can now successfully host a website using GitHub and Netlify. You can set up automatic deployments to certain branches of a GitHub repository. This way, you can automate and streamline the deployment of your website.

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



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related articles

Alexandra Fasulo writes of freelancing her way to freedom

Alexandra Fasulo last month published her first book and calls it “my favorite thing I’ve ever done.” She...

A step by step guide

This article discusses the most crucial steps in defining and planning for a financial goal. Only after...