fter finishing your amazing Angular app you want to show it to the world. A good and easy option to deploy your Angular app is on Firebase hosting. This story will explain the required steps to do this.
For this you need the firebase tools, which you can install using NPM which comes bundled with Node.
Assuming that you have already created your app and are ready to deploy it, head over to your project from within your terminal. Install firebase tools using the following command:
npm install -g firebase-tools
In order to use the firebase CLI you need to log in using:
This will open up a window in your main browser, where you can use your Google credentials to log in.
Before proceeding make sure you have created a project for your angular app.
With your project now created, you have to initialise Firebase Hosting.
Alternatively you could use the following command, to directly initialise only hosting:
firebase init hosting
After initialising your project you have to select your recently created Firebase project.
After this you will be asked the following question “What do you want to use as your public directory?” In Angular 7 you must include your application’s name in this field: “dist/YourProjectName.” . Before Angular 6 using “dist” was sufficient.
Next specify “yes” to configuring as a single-page application and “no” to overwriting your existing index.html (if applicable).
A new file “firebase.json” should now be added to your folder, which should look like this:
The Firebase part is now finished!
Deploying your Angular app
In order to fill up the dist folder with your compiled app, we use the following command:
ng build --prod
Note: the addition of the “ — prod” flag to use the production rules found in “environment.ts.prod”.
After this is done we finish the proces by exactly deploying your app:
That’s all folks! Your app is now online and will be available for access through the link provided in the console.