8373. Deploying Text Compare Angular App to Netlify

Introduce how to deploy angular application to Netlify.

1. Netlify

Netlify is an online service which builds, deploys, and manages modern web projects. Netlify basically initiates its own kind of repository that pushes both to a Github repository and its own services. It offers hosting for front-end projects with many options.

2. Deploying Application From Github Repository

In this tutorial, I will deploy my Game Store Angular app to Netlify.

2.1 New Netlify Account

Go to https://app.netlify.com/signup to create a Netlify account with your GitHub account.

2.2 New Site from GitHub

After login, you are in the app home page, click ‘New site from Git’. image Choose ‘Github’, next. image Authorize Netlify to access your GitHub account, next. image Choose the repository ‘text-compare-angular’, next. image Choose master for the Branch to deploy, set ng build --prod to the Build command, and set dist to the Publish directory, click the ‘Deploy site’ button. image Netlify will start to deploy your site. image Switch to ‘Deploy’ tab to monitor the status and check the logs. image If the deployment fails, click on the FAILED build, check the log and you should see the error in details. image If no issue occurs, the publish will be done after few seconds(or minutes). image

2.3 Testing

Switch back to the ‘Overview’ tab, click on the green link. image Our app is now running in the domain of Netlify. image Try to input some texts in the two input boxes and click ‘Find Difference’ button. You should be able to see the difference. image

2.4 Changing Site Name

Switch to Settings tab, scroll down and click the ‘Change site name’ button. image Change the name to ‘text-compare’ and save. image Access your site with the new URL, it should work. image

3. Reference