Simple CRUD App using Express & Nuxt JS using serverMiddleware – Part 2/2

Before we continue part 2 of this mini-project, let’s do a small recap. In the previous article, we implemented a REST API server using Express. We took advantage of serverMiddleware feature of NuxtJS so that we can run both server & client on a single server. We implemented the APIs for Articles & Users modules.

In this article, we will implement the front-end of this project which is the final step. I am not going to explain every single line of code in this article as the frontend code of the pages is very self-explanatory. The only important part is the initial setup of the frontend-related files. So let’s begin with the same code we implemented last time.

Step 1 – Install Nuxt Auth Module

Nuxt Auth module is an official Nuxt module that you can use for implementing User Authentication related features without hassle. You can find more info about this module here. For now, let’s concentrate on the integration.

cd nuxt-with-express
npm install @nuxtjs/auth

Step 2 – Nuxt Modules Configurations

Add below configurations inside /nuxt.config.js to enable various modules

modules: [
    'bootstrap-vue/nuxt', // enables bootstrap vue module
    '@nuxtjs/axios', // enables Nuxt Axios module
    '@nuxtjs/auth', // enables Nuxt Auth module
],

If you followed the previous article, nuxt.config.js must be already having modules:[] array like this

modules: [
    'bootstrap-vue/nuxt', // enables bootstrap vue module
    '@nuxtjs/axios', // enables Nuxt Axios module
],

So just add ‘@nuxtjs/auth’ in this array.

Step 3 – Nuxt Auth Configurations

To enable Nuxt Auth module features, we have to add some configurations as below inside /nuxt.config.js
Comments are added to the code for understanding the purpose.

auth: {
    strategies: {
		local: {
			endpoints: {
				// these are the API endpoints we created in Express
				login: {
					url: '/api/users/login',
					method: 'post',
					propertyName: 'token'
				},
				logout: true,
				user: {
					url: '/api/users/user',
					method: 'get',
					propertyName: 'user'
				}
			},
			tokenRequired: true,
			tokenType: "Bearer"
		}
    },
    redirect: {
		  login: '/user/login', // User will be redirected to this path if login is required
		  logout: '/', // User will be redirected to this path if after logout, current route is protected
		  home: '/' // User will be redirect to this path after login if accessed login page directly
    },
    rewriteRedirects: true,
},

Step 4 – Create Vuex Store (Very Important)

This will sound odd but you have to create an empty file at /store/index.js for Nuxt Auth module to work properly.

Important notice on Nuxt/Module documentation says this :
“When adding auth-module to a new Nuxt project ensure you have activated the Vuex store.”

If there is already a file at /store/index.js for some other purpose then you don’t need to do anything in this step.

Step 5 – Update Page Layout Template

This is entirely up to you how you implement the front-end design. I have done some basic designs using default bootstrap features so that we don’t have to do any CSS work.
You can grab a code for /layouts/default.vue file code from the repo here.

https://github.com/aslamdoctor/nuxt-with-express/blob/master/layouts/default.vue

Step 6 – Add User Module Pages

For the user module, I have implemented Register, Login, Logout, and My Account pages. You can grab the code for these pages from here.

https://github.com/aslamdoctor/nuxt-with-express/tree/master/pages/user

Place them inside /pages/user/ folder.

Step 7 – Add Article Module Pages

For the articles module, I have implemented all the CRUD-related pages. You can grab the code for these pages from here.

https://github.com/aslamdoctor/nuxt-with-express/tree/master/pages/articles

Place them inside /pages/articles/ folder

Also, don’t forget to grab the code for the landing/welcome page of the project from here

https://github.com/aslamdoctor/nuxt-with-express/blob/master/pages/index.vue

And place it inside /pages/ folder.

Step 8 – Run The App

Now the project is all set to test the front-end. So run the project using the below command

npm run dev

And then access it in the browser using this URL http://localhost:3000

Let me know in the comments if you find any issues.

You can download the code of the whole project from here
https://github.com/aslamdoctor/nuxt-with-express

Watch Demo

I hope you like this article. If you find it helpful, please share it with others too. I am thinking about expanding this project with more features in future articles. But that will be separate article series with a separate code repository.