This content originally appeared on DEV Community and was authored by Kirk
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.
Don’t forget that you need a ScaleDynamics platform 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-appweb template app created withangular-cli. To update it, open thesrcfolder 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
Don’t forget to login to ScaleDynamics Platform to start developing. In case you don’t have an account yet, take 2 mins to create a free community account here
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:
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!
This content originally appeared on DEV Community and was authored by Kirk
Kirk | Sciencx (2021-06-11T12:20:34+00:00) Build your MEAN project with automatic Express.js management. Retrieved from https://www.scien.cx/2021/06/11/build-your-mean-project-with-automatic-express-js-management/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.