MERN ready-to-deploy template, to skip Express.js
Published: 2021-05-11 15:28:26

At ScaleDynamics we have one recurrent passion: to make web developers’ life easier 🙈.
![bam](https://media.giphy.com/media/o9ggk5IMcYlKE/giphy.gif) 

BAM! And we strike again! We built a fully open source MERN template ready to use for our platform. 

One command to develop with frontend and backend live reload... 
One command to deploy on the cloud...

Let’s get started! 

It is located here (https://github.com/ScaleDynamics/react-mongodb-template) - use it as you wish and start coding your projects with it! We hope you’ll find it helpful! 🤗




## A MERN template with a fully managed Express 

Quick reminder — MERN stands for MongoDB, Express, React and Node.js, and is one of the several variations of the MEAN stack (MongoDB, Express, Angular, Node.js). It is one of the standard “Full Stack” stack for JavaScript developers.
This template is configured for the ScaleDynamics web platform. It is on MIT license and ready to be used to build your own MERN based apps/services!
Everything is preconfigured: we provide one command to develop with live reload (frontend and backend) and one to deploy to make it live on a URL.
One particularity of our platform is that you don’t have to manage the Express.js layers, the platform manages them for you automatically, so you can focus only on the MongoDB/Node/React coding.
You can stop coding HTTP/JSON as it is now automatic, thanks to our compiler. It generates the HTTP/JSON stubs required to call a Node.js function using JS objects.
Please note that you need a ScaleDynamics platform account only to deploy your project, you can create your FREE  Community account [right here](https://console.scaledynamics.com/auth/signup/)).


## Diving into the template

To start using the MERN template you can clone it:
```ssh
git clone https://github.com/ScaleDynamics/react-mongodb-template.git
```
This project is divided in two parts:
  - the frontend, where you can find a `react-app` web template app (located in the `frontend/react-app` folder). It has been created with `create-react-app`. To update it, open the `src` folder where you can add, modify or delete components.
  - the backend contains a `hello` 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 `frontend/react-app` folder and run those commands:

### To set up the project 

```ssh
npm install
```

### To log onto the ScaleDynamics Platform
Then use your ScaleDynamics account credential to log onto the platform (feel free to create a free community account [here](https://console.scaledynamics.com/auth/signup/))

```ssh
npx warp login
```

### Develop with live-reload 
To enter a live-reload development session, use the command below. Feel free to update the frontend or the backend code, it will be rebuilt at each change.


```ssh
npm run start
```

Please note that when running this command, you have to select a project. On the ScaleDynamics platform, a project identifies an application or a microservice. Select an existing project or create a new one. 
For more details on projects, see the [documentation](https://docs.scaledynamics.com).

### Deploying with ScaleDynamics

To deploy your project you’ll have first to compile and minify your project for production.

```ssh
npm run build
```

Then use the deploy command

```ssh
npm run deploy
```

Note that when running this command, you have to select a project and an environment. On the ScaleDynamics platform a project identifies an application or a microservice. 

Select an existing project or create a new one. An environment identifies the cloud execution environment to run your app. You can create as many as you want like ‘staging’, ‘demo’, ‘prod’... Each environment has its own URL. 

To deploy, select an existing environment or create a new one. For more details on projects or environments, see the [documentation](https://docs.scaledynamics.com).

### Configure MongoDB driver

Regarding MongoDB, we provide a template module  in the `src/mongodb.js`. To use your own MongoDB instance, replace the `URI` constant by your own.

```js
const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';
```
## You’re all set!
### Creating new functions

You can create new functions that can be called by the frontend. Add them in `index.js` or into another module and export it. 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, feel free to adapt this code:

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

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

And that’s it! If you need more information, you can refer to the documentation:
  - [ScaleDynamics Platform](https://docs.scaledynamics.com/docs/frameworks)
  - [React](https://reactjs.org/docs/getting-started.html)
  - [MongoDB](https://docs.mongodb.com/guides/)

We hope you liked it, please let us know if you have any questions or feedback! 
We have more template variations coming up for React, so you can subscribe, or follow us on [Twitter](https://twitter.com/scaledynamics), [Facebook](https://www.facebook.com/scaledynamics.tech) and even [Instagram](https://www.instagram.com/scaledynamicstech/) if you wish!