Topic: MDB Vue with Express.js

Mikołaj Smoleński
staff posted 2 years ago
Introduction
Express.js is fast, unopinionated, minimalist web framework for Node.js. It is designed for building web applications and APIs. In this tutorial, we'll use Vue for the front-end and Express with mongoDB for the back-end of a full-stack web application.
Prerequisites
Make sure to install the following items globally:
Node.js: https://nodejs.org/en/
Vue CLI: https://cli.vuejs.org/guide/installation.html
MongoDB: https://www.mongodb.com/download-center/community
Quick start
Working template is ready to be cloned from the GitHub repo:
git clone https://github.com/smolenski-mikolaj/MDB-Vue-with-ExpressJS.git
After cloning let's install it:
cd ./MDB-Vue-with-ExpressJS npm install
Now, it's time to run backend and frontend separately in two terminals
First:
npm start
Second:
cd ./mdb-front npm start
Great! You should see now working App:

Express configuration
Main backend file is server.js in the root of the project. At first we have to connect to the database using mongoose:
That will establish connection with vuenodedb
where we will store all data.
After establishing connection there is a need to create the express server:
Finally, there are three endpoints created for getting, creating and deleting todos from the database:
In the server.js we also import models/todo.js file where the ToDo schema is saved:
Note! While creating a new Todo in the production mode you should always prepare some validation rules! In this example everything the user write in the input field will be sent do database which can crash it. In addition, while the app is growing it's a good practise to move db connection and endpoints to the separate files.
Vue CLI configuration
Frontend logic is located in the ./mdb-front dir and the app template is stored in App.vue inside ./src dir. Let's analize it!
Above we can see the main template. All events happens inside two components: CreateToDo and ListToDo. The first one is basically an input which gives an ability to create the new Todo. Just after submitting it emits the createTodo
event.
ListToDo component stores all todos (which are passed using props) and displays them in the table. It also emits an event - deleteTodo
. This event is used for removing a specific todo from the database.
To post or get from the database we'll have to define APIService:
APIService is imported in the App.vue and then used for the backend-frontend communication:
As you can see - we use three apiService methods for the communication with the mongo database.
Summary
In this tutorial, we've created a TODO application with Node.js and Vue which consumes a REST API created with Express.
- Category: Vue
- Specification: MDB Vue 5.8.1 + Express 4.17.1
Good Job !
It was very useful for me.
Mikołaj Smoleński staff commented 2 years ago
Thank you for the positive feedback. Best regards