DEV Community

Cover image for MERN ready-to-deploy template, to skip Express.js
Kirk for ScaleDynamics

Posted on • Updated on

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

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then use the deploy command

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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]]';
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Other info

And that’s it! If you need more information, you can refer to the documentation:

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!

Top comments (0)