ACA Blog

ACA Blog


December 2018
M T W T F S S
« Nov    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Categories


How to create fast, scalable applications with VueJS and Firebase (part one)

Gert BangelsGert Bangels

Nowadays, loads of functionality that once got taken care of in the backend is shifting towards the frontend. As a frontend designer, I’ll show you how to create a simple SPA (Single Page Application) without the hassle of maintaining a backend.

What are we creating?

Preview of FireNotes app

We will make a simple CRUD (Create, Read, Update, Delete) application in the form of a notes app. For this demo we are using: VueJS CLI, VueRouter, ElementUI and Google Firebase.

Please note that this is part one of a blogpost series. In this part we will set up Firebase, install VueJS locally via the command line interface, create the necessary views and set up the routing. Our database connection will be limited to ‘read’ only. Creating, updating and deleting notes via our app will be available soon in part two of the blogpost series.

Why VueJS?

There are many frameworks and technologies that may be suitable for this project, so choosing VueJS is a personal preference. I have chosen VueJS over other frameworks because:

Then again, it also comes with some tradeoffs:

Why Firebase?

Firebase is a great service that lets you focus on what matters most: crafting fantastic user experiences. Using Firebase means you don’t need to manage servers or write APIs. Firebase can be your hosting, authentication tool, API and datastore. It can be modified to suit a lot of your needs and besides that, it can perfectly scale along with your project as it grows over time.

The ‘Spark’ plan, which is completely free, offers you up to 100 simultaneous connections, 1GB storage and a 10GB download limit. Enough for a small project, startups or for indie developers that want their idea(s) validated

Creating the application

Depending on your skill level, the following steps will take you approximately 30 to 60 minutes to complete.

Step 1: Setting up our Firebase environment

Head over to https://firebase.google.com/ and sign up with your Google account. Once that’s done, head over to the Firebase console and create a new project. I named mine ‘FireNotes’.

Adding a firebase project

Since we will be using the Firestore database, head over to the ‘Database’ tab in the sidebar under the ‘Develop’ section and enable database usage in test mode*, as seen below.

Firestore database

* Important notice: this will give everybody access to your database. If you plan on releasing a project with Firebase, please dig further into the documentation of database permissions and set it up properly.

Next up, let’s add some notes in our database. Add a new collection and name it ‘notes’. This will be the parent collection where all our notes live. Populate it with some dummy notes like the screenshot below, containing an automatic ID, post date, title and content:

Populating a Firestore database

Step 2: Setting up our VueJS project

Fairly easy so far, right? Let’s shift the focus on our application now.

Open up your console and navigate to your projects folder. Assuming you already have NPM installed, just install Vue CLI via the following command:

Next, let’s kickstart your project using the following command:

This will prompt you with a choice for default or manual preset. For now, let’s start with the default option with NPM. Once installed, head over to your firenotes folder and start your webserver with following command:

If you navigate to the provided IP address (normally localhost:8080), you will see the standard ‘hello world’ view Vue provides:

VueJS welcome screen

Step 3: Creating the main layout

Next, let’s visualize what our application should look like. I’m not going through styling details in this blogpost, so I’ll use the ElementUI kit to speed things up.

Head over to /src/main.js and add the ElementUI imports, and register it into our VueJS app, right below the ‘import Vue’ as shown below:

Now we can start using ElementUI components in our templates. I’ve replaced the Vue logo with my own (download here), and changed the App.vue template as follows:

Which makes it look like:

CRUD application welcome screen

Step 4: Setting up our routes

So far so good! Next we can install vue-router, which is the official VueJS router. It deeply integrates with your VueJS application’s core, making single page applications a breeze. With vue-router we will be able to navigate to our notes page, which we will set up later.

Just like ElementUI, the vue-router needs to be imported and registered within our VueJS app. Head over to main.js and replace it with following code:

What happened here? Basically, we have specified the URLs of our two navigation items and assigned them to two different components. We’ve also included rules to automatically go to the homepage on load or whenever a URL triggers a non-registered route. Last but not least, we’ve registered the routes via ‘new VueRouter’, which is now embedded into our application core as it gets passed onto our ‘new Vue’ instance.

Now, saving this will probably cause some errors, since we didn’t do any work on the notes component yet. Let’s create a simple Notes.vue file inside the components folder.

Next, we need our app to display the correct components based on these specified routes. This will require some changes to our App.vue file on both the navigation and the content panel (el-main).

Here we added router=”true” to the component, which enables the ’s indexes to be used as ‘path’ to activate the route action. We also moved the introduction heading and paragraphs to HelloWorld.vue (you should too ;-)) and replaced it with <router-view/>. Now the router is fully responsible for which component is shown inside that panel. Awesome!

Next up we’ll tweak Notes.vue to actually display notes. For now, all content is static. Later, we will populate the notes table with data from our Firestore database.


Which makes it look like:

CRUD application read screen

Step 5: Coupling Firebase with our project

Great! Now everything is in place for us to transform the static application to a Firestore data driven application. Let’s install the dependencies in order to connect with Firebase:

Next, add the following to your main.js file:

Here you still need to populate ‘apiKey’ and ‘projectId’, which can be found under the Project settings link via the cogwheel:

Firebase project settings

Next, head over to the Notes.vue component where we will empty the static array of notes and fill it with the ones we created in our Firestore database earlier on. We also defined an empty-text on the table, which will be shown while data is being loaded into our table.

This makes the notes we manually added earlier in our Firestore database to be seen in our application making it a little bit less static. Great success!

Great success gif

What’s next?

In our follow-up blog post on this subject, we dig further into the remaining functionalities: creating, updating and deleting notes in our Firebase database, completely controlled by our VueJS app. Since we had a question in the comments on login functionality, we also added that as a bonus!

Questions, remarks?

Can’t get it to work? Need a more in depth explanation of certain bits of code? We’re all ears. Simply leave a comment and we will get back to you as soon as possible.

Gert is a UX/UI Designer and Front-end Developer for the ACA Creative Team. He has a strong interest and opinion on UX. Being the teams technical lead, he likes to explore new technologies in the fast-paced front-end environment.

5
Leave a Reply

avatar
3 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Gert BangelsKur MeiWard Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Ward
Guest
Ward

Nice, I created the application with Firebase & Vue, works perfect!
Can you maybe write some more information about Firebase and API keys?

What if I for example create a registration page, and I write to Firebase. After that I want a back-end where only authenticated users can edit. Is that possible with Firebase?

Because now you can do anything with the API key? ( It’s new to me but looks very promising. )

Kur Mei
Guest
Kur Mei

Hello – Thank you for this lesson. I am completely new to coding with JavaScript, but was able to get everything up and working – even customized quite a bit. However, I am trying to add a new field to the form, but the dialogs will only display two fields. Is there a setting or CSS somewhere for updating these views, or am I just missing something right in front of me? Any help would be greatly appreciated. I am trying to go through different manuals and searching for resolution, but not finding anything so far, so wanted to ask… Read more »

Kur Mei
Guest
Kur Mei

Hello again – After some time spent being an idiot, I resolved my issue… end form tag in wrong place… Thanks, again, for the tutorial, and for hearing my pleas for help : )