This tutorial is out of date and no longer maintained.
Building Angular apps is a fun project. Once you’re done building, it’s time to expand the fun by sharing your project with the world.
While there are many ways to host our Angular application, we’ll be looking at how to host with Firebase since Firebase makes it super simple. Firebase offers many great features (and has a solid free plan).
We’ll just be using Firebase hosting to handle our Angular app.
dist
files: ng build --prod
firebase deploy
We’ll be using the Angular CLI to create our Angular app that we’ll deploy. For more info on the CLI, check out our article: Getting Started With Angular Using the Angular CLI.
If you don’t already have the CLI installed, we can do it using Node and npm.
- npm install -g @angular/cli
Note: The -g
flag is to install globally across our entire machine.
Once we have the CLI, we can create a new Angular app and test it out using the following:
- ng new hosty-app
Navigate to the project directory:
- cd hosty-app
Serve it locally and see it in action:
- ng serve --open
Our app is good to go! Let’s start setting up our Firebase app.
We’ll need to create a Firebase account and a Firebase app so that our application knows where to deploy to. Once you log in to your Firebase console, create a new app.
We’ll name our app Angular Hosting Test. You can also set the subdomain for your app. Your app will be hosted at subdomain.firebase-app.com
.
Our new app is live! That’s all we had to do in the Firebase dashboard. The rest of the work will be done on our own computer in our applications.
In order to deploy to Firebase, we’ll need the Firebase CLI tools. Here are the steps we’re about to take:
We’ll use npm to install similar to how we installed the Angular CLI:
- npm install -g firebase-tools
We’ll use the CLI tools to log in to Firebase.
- firebase login
This will open your browser and allow us to log in from there.
That’s it! We’re all ready to start using the Firebase tools.
The first step is to link our local Angular app to our Firebase app we created in the Firebase dashboard.
- firebase init
Here are the answers to the questions Firebase tools will ask:
Are you ready to proceed? Yes
Which Firebase CLI features? Hosting (In the future, use whatever you need! Press *space* to select.)
Select a default Firebase project? Angular Hosting Test (Choose whatever app you created in the earlier steps)
What do you want to use as your public directory? dist (This is important! Angular creates the `dist` folder.)
Configure as a single-page app? Yes
You may be asking, what exactly does this command do? This creates two new files:
.firebaserc
: Sets the Firebase project we’re linking to
{
"projects": {
"default": "angular-hosting"
}
}
firebase.json
: Sets the hosting folder and rewrites
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Our app is now linked to our Firebase app. We’re ready to finally deploy!
The deploy is essentially two steps:
dist
folderWe’ll create our production files using the Angular CLI command:
- ng build --prod
This will create a brand new dist/
folder in our project with the files necessary to launch our app. You could take these files and open the index.html
file locally and see your app running!
Now that we have the dist/
folder, we can tell Firebase to deploy it:
- firebase deploy
Our app is now deployed and ready to view! Run this Firebase command to see it in action:
- firebase open hosting:site
You can visit the Firebase dashboard to see the logs of all your deployments. You can even set a custom domain in the dashboard.
If you want to automate the process of building and deploying, you can add a script to your package.json
file:
"scripts": {
...
"deploy": "ng build --prod && firebase deploy"
},
Now we can run the deploy script with:
- npm run deploy
Watch as both commands run and our site is updated!
With Firebase hosting, it’s an easy process to deploy our Angular CLI apps to production. In the future, we’ll be exploring more options with other hosting providers, but Firebase is a fast, free, and easy way to host quick Angular apps.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.