MERN ready-to-deploy template, to skip Express.js

At ScaleDynamics we have one recurrent passion: to make web developers’ life easier 🙈.

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

Diving into the template

To start using the MERN template you can clone it:

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

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)

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.

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.

Deploying with ScaleDynamics

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

npm run build

Then use the deploy command

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.

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.

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.

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

module.exports = { myFunction };

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

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
• React
• MongoDB

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, Facebook and even Instagram if you wish!