Building and deploying an Angular app is super simple. These instructions will have you up and running in less than an hour. You will learn how to…
- Install the Angular-CLI
- Create your first app
- Build your first app
- Deploy your first app to the internet
Here are the commands you need to create a new Angular app and deploy it to Firebase. Click here to see the final result.
npm install @angular/cli -g ng new getting-started cd getting-started ng build npm install -g firebase-tools firebase login firebase init firebase deploy
Install the LTS version of node.js: https://nodejs.org/en/
Install the Angular CLI
Open a command prompt and type: npm install @angular/cli -g
To check the Angular CLI installed properly type: ng –version
If you see an error there are a couple of things to try…
- Restart the command prompt
- Restart your machine
- Reinstall npm: npm install npm@latest -g
- Check npm is installed by typing: npm -v
- Check the path to npm by typing: npm
- Check your Environment Variables. Add npm to the path variable.
Create a new Angular Project
Create a new Angular project by typing: ng new getting-started
The CLI will ask you some questions and suggest some answers. The defaults are fine so just hit “return” after each question.
Installing will take a few moments. The CLI creates a new directory containing everything you need to get started and downloads the dependencies you need from npm.
Get your first app up and running
Change directory (cd getting-started) and run the test server by typing: ng serve.
After a few seconds, your app will be compiled and ready to view in a browser. The default URL is http://localhost:4200/.
Once you have finished, return to your console and kill the server (CTRL-C).
Build your first project
You can build your project with the command: ng build.
You can build an optimised version of your project with: ng build –prod
A production build takes longer but optimises your app and makes it ready to deploy to your production server. You should only deploy production builds to the internet. Keep the debug builds for testing on your laptop.
Create a Firebase account
We are going to use Firebase to host our app. Firebase is Google’s answer to AWS/Azure.
Head over to https://firebase.google.com/ and click Get Started. Create an account by following the instructions.
Next, go to the Firebase console https://console.firebase.google.com/ and click Add Project.
Enter a project name (e.g. getting-started), accept the T’s & C’s and click Create Project.
Install Firebase Tools
Open a command prompt (make sure you are in the getting-started folder) and type: npm install -g firebase-tools
Login to Firebase: firebase login. Your browser will pop up. Follow the instructions before returning to the command prompt.
Almost there… type firebase init to initialise Firebase. You will be asked a few questions. Answer them like this:
? Are you ready to proceed? Y
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. >(*) Hosting: Configure and deploy Firebase Hosting sites
? What do you want to use as your public directory? dist/getting-started
? Configure as a single-page app (rewrite all urls to /index.html)? Y
? File public/index.html already exists. Overwrite? Y
Upload your app to the internet
The final step is to upload your app to Firebase: firebase deploy
The URL of your website is displayed at the bottom of the console. Look for the “Hosting URL” (see above).
That’s it. Let me know how you get on.