Hi guys, welcome to netwhile.com. In this article, I am going to share with you how to Host Angular Application On firebase for free. Many a time it happens that you have created an Angular application, but you don’t know where you can host it for free. So, this guide will help you to host Angular application for free on a server called Firebase.
What is Firebase?
Firebase console is a Google product that you can use for many purposes like Hosting website. You can also use firebase for Social media login authentication service integration to your project. Firebase can also store Images for you and gives an URL for the same so that you can access it anywhere.
Let’s get started with,
How To Host Angular Application On Firebase?
To host Angular application you need to run these commands
first: npm install -g firebase-tools
second: firebase login
third: firebase init
fourth: firebase deploy
In order to host the Angular Application on firebase, you have to login into the firebase console with your Gmail account. Then you can create a project on firebase console on which you can deploy your angular Application.
Follow these steps to create a project on Firebase console.
- Open the browser and search firebase console or click here.
- Now Login to firebase console using your Gmail account username and password.
- After Login you will see a button named Create a Project.
- Click on Create a Project button.
- On click, you will see an input box that asks you to enter the project name.
- Enter the project name and click on agree to checkbox then click Continue button.
- Now it will ask you to either connect with google analytics or just simply create a project, you can choose either.
- For now, just click the Continue button.
- Wait for some moments your project will be created.
Here we come to the end of how to create a project in firebase console.
Once your Angular Application is ready to be deployed just,
Follow these steps to Host Angular application on Firebase.
- If you are using Vscode open terminal or you can open the project path in command prompt.
- Now install firebase tools using the command npm install -g firebase-tools and press enter.
- After the package is installed run the command firebase login and press enter.
- It will ask you a question simply type Y for yes and then press enter.
- After you press, it will redirect you to Gmail login, Login to your Gmail account using username and password.
- Click on the Allow button and your login will be successful.
- Now on terminal run the command ng build –prod to create a build of your project.
- This command will create a dist folder in your project. And the dist folder will contain the project build folder with the same name of your angular application.
- Once the build is complete, run the command firebase init.
On firebase init, you will have to give some configurations.
How To configure after Firebase init command?
- Are you ready to proceed? (Y/n) Press Y and hit enter button.
- Now choose the hosting using down arrow and press space bar to select the Hosting: Configure and deploy Firebase Hosting sites then press enter.
- Now it will ask to Select a default Firebase project for this directory: (Use arrow keys).
- Simply select the project we just created in the Firebase console and press enter key.
- Now choose the public directory as dist/Angular Application Name(that you have given) press enter button.
- It will now as Configure as a single-page app (rewrite all URLs to /index.html)?. simply enter Y to say yes.
- Now it will ask File dist/AngularDeploy/index.html already exists. Overwrite? (y/N). Type N and press enter key.
- Now you are all done with configurations. Now Run the command Firebase Deploy
- Your code will start to deploy and once the deployment is done, you will get the URL too, if you want to access the application, you can click on those URLs.
You can also read: