Updates:

Pivoting content: arts and crafts, electronics, technology, and a little dose of everything else! Every Monday and Thursday (hopefully)!

Important:

Working on kyaratar.com and other projects.

Create Angular5 Project and Launch on FireBase Tutorial

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Angular5 is a popular tool to use for developers to build mobile and web applications. Here is an easy to follow guide to get started and launch your project to FireBase.


About Angular5:

Angular is a popular application framework created by Google and other developers. It combines the functionality of HTML and Javascript and the new typescript, to lessen the workload of creating scalable applications ready to publish in no time. It makes web development and mobile development easy as pie. Of course, you have to know some programming in order to get through this tutorial (just a tiny bit). 

Below we will get started step-by-step, and I hope to see you launching your very first web application with Angular5 onto your FireBase account! Be sure to apply for a FireBase account in Google Developers Console as well. You will also need to set-up and get your app id. Just follow the steps through the prompts when you do that. With that, let's start!


Step-by-Step Set-Up:

The first thing you obviously need to do is install the Angular CLI (command line interface) so that you can type specific commands. If you are on windows you can use command prompt on administrator privileges by right-clicking command prompt and launch as admin.

Two things you must install right away is the Angular CLI and Node.js (click on those links). Download whichever version of Node.js you want first before installing Angular; I downloaded LTS version.

 

 

Now in your command prompt, or shell, or bash. The commands to install angular CLI are npm install -g @angular/cli , the -g stands for global so it's on your entire system. Type the commands to check the version of each installment. Hopefully, you get numbers to know that you have installed them properly like above.

 

 

When you have Angular installed you should get that nice big red text that says "Angular CLI" by typing ng -v.


Let's Get an IDE:

As pictured below, I will be using the Visual Studio Code IDE for my Angular5 projects. You can use other IDE such as from JetBrains (you need to pay though).

 

 

Once you have the IDE installed you can create your very first project. Make sure you do it in a directory you will be using, you can configure your project directory in CLI or through copying and pasting your entire created project folder to a specific location you want.

Create your project with ng new your-app-name . Then you want to cd into that and test it first to see that it's working with ng serve.

Next, below we can get some plug-ins for Visual Studio Code to give it more functionality. Below I like Beautify for styling code and general use, you can change your settings and more.

 

 

In the picture below you can also go to the View menu in Visual Studio Code and turn on the terminal. There just confirm that you have everything installed and running properly like I did below.

 

 

If you didn't make your project yet, you can start now through the terminal in Visual Studio Code. The commands are just like Linux. I make my folder and then create my project below.

 

 


Creating Our Simple Application:

Now with most of the set-up stuff out of the way, we can begin by creating our application. In the next steps, you can also download and install libraries, modules, and more services to create a better application! I downloaded and install Material to my project later on, which gives the user interface (UI) cooler animations and styling.

In the below image, navigate to your project to verify that all the files are there. Also make sure in the terminal that your are in your project! It will say (master) in blue next to your directory path.

 

 

Next, as pictured below, let's test our application with ng serve. Then in any browser you want, go to localhost:4200.

 

 

In the below image, I am installing BootStrap which is a well-known CSS framework for making any web application mobile-friendly. You should download and install it too! I download version 4 (still in beta). If you don't know BootStrap, just go and read the documentation and API for implementing BootStrap into your project.

 

 

When you install BootStrap navigate to your .angular-cli.json file and scroll through it to "styles" and "scripts". Verify or add in those lines for the inclusion of BootStrap css and js files.

 

 

Now we can test and check if our project is still working. If you are getting bugs or errors at this part, feel free to comment below!

 

 


Getting Into FireBase:

 

I know I didn't quite explain components and going over the overall structure of how Angular is set-up but I suggest this video for you watch before moving onto FireBase. Anyways, components that you create can be used to create different "pages" or forms that you want, and each component must be added in the .ts files and modules.

 

 

You can also watch the next video that Awais talks about as well as components (or all his videos).

 

 

Once you have FireBase installed to your project. We can create our account and move on to the actual launch and deployment of our application. Follow the image below and type firebase login. Sign-in with your preferred Google account to complete the process. Make sure the account you sign-in with has your FireBase and Google Developer Console ready.

 

 

After you have it authenticated, type firebase init to start setting up your FireBase for your application. When it asks for you directory type in dist, then answer yes and then no to the next prompts.

 

 

Below, just use the default settings for each part of FireBase such as storage, database, and such. I suggest you just use storage, database, and authentication for now as the other features of FireBase require much more difficult set-up procedure (not that difficult, but you may need to upgrade your account as we are using a trial of FireBase).

 

 

Now go back to your web browser and check and make sure that you did make your project. Below my project is RoyceAOnePage.

 

 

On this page, click on the cog for settings and then general, get your project ID and Web API key for the next steps.

 

 

Below I use the command firebase use --add your-project-id to add my project to FireBase with that FireBase project ID. You do not have to do this step unless you didn't already make your project yet.

 

 

Now that you have FireBase added to your project. Run the command ng build. This will build your project into a dist folder which you can find in the file explorer at the left in Visual Studio Code. Then you type the command firebase deploy to launch and upload your project to your FireBase project.

 

 

Now if you don't get any errors or bugs, you will be given a link to go to, to view your awesome web application.

 

 


Decorating Your Application:

Now that you have your very first web application created with Angular5 and hosted onto FireBase, you can download and decorate your web application and make whatever you want! You can create HTML forms and use Javascript for many functions and even create simple CRUD (create, read, update, delete operations for a database). What I did with my project was create this: https://royceaonepage.firebaseapp.com/


Thank You:

This tutorial was simple I hope. It's not that difficult to create and launch your own website with the help of Angular5 and FireBase! If you have any questions, comment below. Thank you and have a fantastic day.

 

Tags: Computer Science, Typescript

Comments powered by CComment