Run Vue.js frontend and Node.js backend with one simple command

The other day as I was leveling up my React/MERN Stack knowledge I came across a super helpful tip. Typically when I am working on a project with a frontend/backend in the same folder I will open a split terminal in VScode to run them both at the same time. While that works just fine it can be a pain to manage. A better way is to use a package called Concurrently. Check this out.

For my example I have a very simple Vue.js frontend application and a backend Node.js API server. The Node.js portion is modified from my OpenSnaps project. Since I have been learning more Vue lately I decided it would be fun to try and recreate that little project with a Vue frontend. As you can see from the screenshot below, my project folder has a package.json, node_modules folder and then a folder for the frontend and one for the backend.

As you can see, in my package.json I have 4 scripts defined. Ignore the first one as it was added automatically when I created the project. The server and client scripts should be pretty self explanatory. They simple startup the frontend/backend servers respectively. The dev script is where the magic happens. We are telling concurrently to run our server and clients scripts at the same time.

Note* you will need concurrently installed globally to run this so make sure to:

npm i -g concurrently

Here is a little screengrab of everything in action:

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top