building forum with vuejs and firebase

Building a Simple Forum With Vue-js, Vuex and Firebase Part1: Authentication

Today tutorial we will demonstrate how to build a web application using Vuejs and Firebase. we will be using VueJS the frontend UI framework and The firebase as our backend in building a simple forum app.

 

 

Series Topics:

 

 

Requirements

  • npm
  • Vuejs 2 & Vuex
  • Firebase
  • Boostrap
  • Http Server: Apache for example

 

As you may already know Vuejs is a javascript framework for building single page applications (SPA). Why Vuejs? Because Vuejs is a lightweight framework that have a powerful speed in building SPA apps. Also Easy to learn and understand quickly than other frameworks like Angular 4 or 5.

If you didn’t have an idea of what Vuejs and how it’s working take a look at VueJs Docs first at the Vuejs official website here Because we will concentrate on this tutorial on building the Forum.

 

Application

Our application will have the following pages:

  • Home
  • Forum display
  • Topic display
  • Login
  • Register
  • User Forums
  • Add Forum
  • Add Topic
  • Edit Forum
  • Edit Topic
  • Topics in Specific User Forum

 

So let’s see in the next section how to utilize Vuejs to split our app into separate components and use the routing to go to any page.

 

Database Structure

Our database will contain four documents also called tables in other databases which are:

  • Forums
  • Users
  • Topics
  • Replies

 

We will using firebase as our database management system so go to https://console.firebase.google.com and create an empty project call it forum then go to Database >> Realtime Database. Then complete any required info. Also go Authentication >> Sign-in method then enable email/password authentication, Take a look at the preview video below for more details:

 

 

Project Structure

Let’s create a new folder with the following structure:

creating forum with vuejs and vuex

 

 

 

 

 

 

 

 

Open up package.json file and insert those contents:

Then run

This command will install all the dependencies listed in the package.json above.

 

Webpack Configuration

We will be using The Single File Components in this tutorials so we we need support for ecmascript 2015 syntax so we will incorporate using webpack to transform and compile the es2015 using babel. Webpack is one of the most powerful javascript bundlers and it used a lot with Vuejs and other Frameworks, read more about webpack here.

 

Open webpack.config.js and insert the following:

The above code tells webpack that to compile all the vue code into js code that are recognizable by web browsers because web browsers at this moment can’t recognize vue code. The entry point will be app.js , this is the file that will be contain the output build of all the Vue components and the build will be in directory named build.

 

Preparing Vue Components

We split our app into smaller separate components, The main component which hold all the other child components. In the next section we will create the blueprint of each component and we will modify them later as we progress on our tutorial.

 

The Main Component

Open the file located in components/App.vue this is our main component that will contain the other child components, then insert this code:

 

Create the following files in components

  • components/pages/Home.vue
  • components/pages/Login.vue
  • components/pages/Register.vue
  • components/pages/Logout.vue
  • components/pages/MyForums.vue
  • components/pages/AddForum.vue
  • components/pages/AddTopic.vue
  • components/pages/EditTopic.vue
  • components/pages/EditForum.vue
  • components/pages/ForumDisplay.vue
  • components/pages/ForumTopics.vue
  • components/pages/TopicDisplay.vue
  • components/partials/AddReply.vue
  • components/partials/ForumTopics.vue
  • components/partials/TopicReplies.vue
  • components/Header.vue

and insert the below code

 

Preparing routes:

Open routes.js and insert the below code:

There is nothing complex here we just imported the components and exported the router object, later we will add this router object to Vue Router.

 

Preparing Vuex Store and Api:

Open store.js and add the below code, we will update this file later:

 

Open helper/api.js and add the below code, we will also update this file later:

The above will contain our api so here we will connect to firebase, create and add documents, delete them, and also add and authenticate users.

 

Finally open the entry point app.js and add the below code:

In the above code we load the imported dependencies like the Vue and Vue-router then initialized the routes and finally created a Vue instance and booted our app in #app

 

Open index.html and add the following code:

As you see the #app will contain our rendered app we load the bundled javascript file output from webpack. Note the <base> tag above, this is very important in order for the routing to function properly adjust it’s value according to your working directory.

Now run this command to build and watch for your javascript

You see a loading spinner but don’t worry we will populate our pages with the required in the next sections.

 

Preparing Login and Register

The first thing to consider when building a forum is to build the login and register functionality that’s because each forum, topic and reply connected to specific user.

 

Let’s open helper/api.js and modify it as follows:

In the above code we setup functions that register and authenticate users using the firebase api, also we add a function that tracks if the user already login or not, this function will be called on every request to ensure that user is already login.

 

Next open store.js and modify it as follows:

Here we add some state variables and some mutations and some actions that we will need to call in our login and register pages.

 

open components/pages/Register.vue and modify it like this:

In the above code we created a registration form and then we bind it to computed properties that read and write from the store like that:

Then we create a method that triggers when submitting the form, then prepares some validation like missing field then we call our api that registers the user, after that on success the user is logged in automatically and we store the user data into our store again so to be used later when adding forums and topics.

 

open components/pages/Login.vue and modify it like this:

open components/pages/Logout.vue and modify it like this:

Here of successful login we clear the user data and redirect to the homepage.

 

Modifying Header and The Main Component

Open components/Header.vue and modify it as shown:

Open components/App.vue and modify it as shown:

Open app.js in the mounted function add this code:

Now in terminal run npm run dev then navigate to http://localhost/project_path/ and try to create a new account and login.

 

Continue to the next part>>

 

Share this: