This content originally appeared on DEV Community and was authored by Kirk
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, 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-appweb template app (located in thefrontend/react-appfolder). It has been created withcreate-react-app. To update it, open thesrcfolder where you can add, modify or delete components. - the backend contains a
hellonode 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:
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!
This content originally appeared on DEV Community and was authored by Kirk
Kirk | Sciencx (2021-05-11T15:28:26+00:00) No need to handle Express.js with this MERN Stack project template. Retrieved from https://www.scien.cx/2021/05/11/no-need-to-handle-express-js-with-this-mern-stack-project-template/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.