Firebase is great tools to host any of your static websites. We can host the website with free of cost and easy to deploy to the Firebase. In this post we will see on how to host an angular website using Firebase hosting.
Step 1: Create an angular application using angular CLI or open an existing angular application.
ng new newProject — For creating a new angular project with angular CLI
Step 2: Install the firebase tools dependency globally using the following command. This will install the firebase CLI into your computer.
npm install -g firebase-tools
Step 3: Do the firebase login through your terminal by using the following command. This will open a browser to login into your firebase console.
firebase login
Step 4: Create a project using the firebase console in the website.
Step 5: Initialize the firebase into your angular project by using the following command in your project terminal. This is will ask list of options to host your angular application.
firebase init
Select hosting configure and deploy hosting sites
Select the public directory as “dist/<your-project-name>”
Type “Y” for configure single app for index.html
For Overwrite click “No”
Now you angular application is connected to the firebase project which you have build using firebase console in the website.
Step 6: Build your angular project preferably in the production mode using the following command. This will create a dist/<your-project-name> folder in your angular application which has the build files and index.html file.
ng build — prod
Step 7: Now create 404.html file which replicates the index.html file using the following command. This help the website to redirect to 404.html when it has any errors.
cp dist/<your-project-name>/index.html dist/<your-project-name>/404.html
Step 8: Now deploy your angular application to your firebase project using the following command. After this command executes it gives the url in which the application has been deployed.
firebase deploy
I hope you have successfully deployed your angular app into firebase. If you any queries feel free to reach me out at saikiran1298@gmail.com
