DEV Community

Cover image for Develop your Vue.js app faster with this MEVN template
Kirk for ScaleDynamics

Posted on • Updated on

Develop your Vue.js app faster with this MEVN template

Coding in Full Stack seems cool, but that requires a lot. For instance, just setting up tools, frameworks, and database tiers already takes you hours.

We know it’s painful to wait while you’re excited with your new ideas 😉 That is why we came up with MERN and MEAN templates to help you start your projects in no time, with a less and simple configuration.

And today, regarding some of your request, we would love to bring you another template for the MEVN stack 😉 Quite similar to the other two templates, you can shift your focus on MongoDB, Vue.js, and Node.js only as Express.js is managed automatically by magic 🤯

Clone it right here 👉 MEVN ready-to-deploy template

Now let’s get to know how the template can help you!

A faster and effortless way to code in MEVN 🤯

Basically, how this MEVN template works is exactly similar to the MERN and MEAN templates that we have just published recently. However, for anyone who doesn’t have any idea about it yet, here’re some key points for you.

This MEVN template is configured for the ScaleDynamics Cloud Platform, which provides not just everything you need to code in Full Stack but even more:

  • One command to develop with live-reload
  • Another one to deploy, make your app/service available on a URL
  • No Express.js layers management, the platform takes care of them automatically
  • No HTTP/JSON coding, as our compiler automatically generates its stubs required to call a Node.js function using JS objects.

You will need a ScaleDynamics platform account to deploy your project. Take 1 minute and create your FREE Community account
right here.

Get the template ready in no time 🚀

clone the template here:

git clone https://github.com/ScaleDynamics/vue-mongodb-template.git
Enter fullscreen mode Exit fullscreen mode

You can find 2 principal parts in this project:

  • The frontend, a vue-app web template created with vue-cli. To update it, open the src folder where you can add, modify or delete components.
  • The backend contains a node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in vue-app folder and run those commands below:

Install easily

npm install
Enter fullscreen mode Exit fullscreen mode

To log in to the ScaleDynamics Platform

npx warp login
Enter fullscreen mode Exit fullscreen mode

Develop both front & backend with live-reload

Use the command below to enter a live-reload development session:

npm run serve
Enter fullscreen mode Exit fullscreen mode

You can always update the frontend or the backend code, it will be rebuilt at each modification.

Please note that you’ll need to select an existing project or create a new one as you want before running this command. On the ScaleDynamics platform, a project identifies an application or a microservice. For more details on projects, see the documentation.

Deploy dynamically

Now, to deploy, you will need to compile and minimize your project for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

Then use the simple deploy command

npm run deploy
Enter fullscreen mode Exit fullscreen mode

You will have to select or create an environment that identifies the cloud execution environment to run your app. You can create as many as you want, each environment has its own URL.
For more details, check out the documentation.

Configure MongoDB driver

In terms of MongoDB, you already have a template module in the src/mongodb.js. Replace the URI constant to use your own MongoDB instance:

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';
Enter fullscreen mode Exit fullscreen mode

You’re all set, start your MEVN project now!

Functions in ScaleDynamics Platform

With the ScaleDynamics Platform, new functions can be called by the frontend. Add them in index.js or into another module and export them. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };
Enter fullscreen mode Exit fullscreen mode

To access your new functions on the frontend side, adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();
Enter fullscreen mode Exit fullscreen mode

Other info

And that’s it! Hope you find it helpful and if you need more information, check out these documentations:

We are always here if you have any questions or feedback!

Cheers!

Top comments (0)