Build your MEAN project with automatic Express.js management

Hi there, some of you guys might already know that we built a MERN stack template earlier that helps you skip Express.js.

Regarding some of your requests, we would like to bring you a new open-source template. And this time, it is for MEAN stack 😉

And you know what, you can still develop both front & backend with live-reload and deploy with a simple command-line while the Express.js part is managed 100% automatically, isn’t that great? 🤯

Clone it right here 👉 MEAN ready-to-deploy template

Now let’s get to know how the template can help you!

A MEAN stack but you only code MAN 🤯

Besides the MERN stack that stands for MongoDB, Express, React and Node.js, we still have the MEAN stack for people who use Angular instead of React. It is also considered as a quite popular one for Full Stack JavaScript developers.

Quite similar to the MERN template, this MEAN template is also configured specifically for the ScaleDynamics cloud platform on MIT license. It offers all you need to start developing your MEAN based apps/services:

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

When it comes to deployment, you will need a ScaleDynamics account, you can create your FREE Community account right here).

How to use the template

First of all, clone the template by:

git clone https://github.com/ScaleDynamics/angular-mongodb-template.git

Then you’ll have both frontend and backend template ready:

• On the frontend, you’ll have a angular-app web template app created with angular-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 frontend/angular-app folder and run those commands below:

Install the project

npm install

Log in to the ScaleDynamics Platform

npx warp login

Develop with live-reload

Start a live-reload development session by using this command.

npm run start

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.

Deploy with ScaleDynamics

When it comes to deployment, you’ll need to compile and minimize your project for production by using:

npm run build

Then the deploy command

npm run deploy

Now, beside selecting a project, you’ll also have to select or create an environment which 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.

For more details on projects or environments, see the documentation.

Configure MongoDB driver

In src/mongodb.js. There is a template module that you can replace its URI constant with your own.

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

You’re all set!

Creating new functions

With ScaleDynamics Platform, new functions 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, 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, check out these documentations:

• ScaleDynamics Platform
• Angular
• MongoDB

We hope you liked it, please let us know if you have any questions or feedback!
Stay tuned for the Vue.js template coming up! you can subscribe, or follow us on Twitter, Facebook and even Instagram for more updates!
Cheers!