DEV Community

Cover image for How to Deploy Angular project to Firebase
April Smith
April Smith

Posted on • Edited on

How to Deploy Angular project to Firebase

This is just a simple instruction on how to deploy your Angular project to Firebase. Note, this is for static or serverless project only. If you have PHP or Node.js separate project, you can look for another tutorial on how to deploy them.

  1. Considering you completed your Angular project, now compile your project using this command ng build --prod

  2. Login to Firebase account ( if you don't have account yet please create).

  3. Create a new project

  4. Back to your codebase, open the terminal and type firebase init

  5. In this question '? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices' select Hosting: Configure and deploy Firebase Hosting sites.

  6. Select 'Use an existing project' and choose the project name you just created.

  7. Then the next question would be 'What do you want to use as your public directory?' type dist/{codebase project name} . The public directory of your angular is the compiled folder of your project.

  8. Next it will ask you 'Configure as a single-page app (rewrite all urls to /index.html)?' type Yes if you type no, there will be a routing issue when you refresh your app

  9. then it will ask you to overwrite - Type No

  10. then type firebase deploy if you want to leave a comment type firebase deploy

  11. Then it will let you know the URL of the project you deployed.

  12. If you have changes or updates just use firebase deploy -m content changes then in your firebase hosting page, you can see all your deployment history, and your URL.

That's it! simple! I love Firebase! Share your firebase site by commenting it below :)

Alt Text

Top comments (0)