Develop your Vue.js app faster with this MEVN template
Published: 2021-06-17 13:12:45

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](https://dev.to/scaledynamics/no-need-to-handle-express-js-with-this-mern-stack-project-template-1bm6) and [MEAN](https://dev.to/scaledynamics/build-your-mean-project-with-automatic-express-js-management-3a79) 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](https://github.com/ScaleDynamics/vue-mongodb-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](https://console.scaledynamics.com/auth/signup/).


## Get the template ready in no time 🚀

clone the template here:
```ssh
git clone https://github.com/ScaleDynamics/vue-mongodb-template.git
```
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

```ssh
npm install
```

### To log in to the ScaleDynamics Platform

```ssh
npx warp login
```

### Develop both front & backend with live-reload 
Use the command below to enter a live-reload development session:

```ssh
npm run serve
```

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](https://docs.scaledynamics.com).

### Deploy dynamically

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

```ssh
npm run build
```

Then use the simple deploy command

```ssh
npm run deploy
```

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](https://docs.scaledynamics.com).

### 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:

```javascript
const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';
```

## 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.


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

module.exports = { myFunction };
```

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

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

const { myFunction } = new Backend();
```
### Other info

And that’s it! Hope you find it helpful and if you need more information, check out these documentations:
* [ScaleDynamics Platform](https://docs.scaledynamics.com/docs/frameworks)
* [Angular](https://angular.io/docs)
* [MongoDB](https://docs.mongodb.com/guides/)

We are always here if you have any questions or feedback! 
* [Twitter](https://twitter.com/scaledynamics)
* [Facebook](https://www.facebook.com/scaledynamics.tech)
* [Instagram](https://www.instagram.com/scaledynamicstech/)

Cheers!