One Framework a Day keeps the Boredom Away: Express

Welcome to this new edition of One Framework a Day keeps the Boredom Away. In this series I will show you how to deploy a particular framework on Clever Cloud every day until I want to go back to boredom. Today it's about Express.

In each post of this series we'll see how to deploy a particular framework on Clever Cloud. Today we are taking a look at Express.

If you want to tag along, make sure you have git, a Clever Cloud account and that you have installed our CLI Clever-Tools.

What is Express?

Fast, unopinionated, minimalist web framework for Node.js

It's pretty much the default JavaScript framework for backend stuff. It's ridiculously simple to use and benefits from a great ecosystem. If you are thinking about a particular module, there's a good chance someone already wrote it. I found a project called RealWorld. They use a Medium clone as example application and have implemented it with a variety of backend and frontend frameworks. Today I will use it as an example with their Express, MondoDB backend and their React,Redux frontend.

Setup

Let's start by the backend. It's a Node.js application using MongoDB so I will need a Node.js application and a MongoDB add-on.

  • Clone the backend: git clone https://github.com/gothinkster/node-express-realworld-example-app
  • Get in the project: cd node-express-realworld-example-app
  • Create the Node.js application: clever create --type node realworld-express
  • Create the MongoDB addon: clever addon create mongodb-addon --plan peanut realworld-mongodb
  • Link the database to the application: clever service link-addon realworld-mongodb

Great thing about this application is that it's already configurable with environment variable so we just have to set them up:

  • Configure the MongoDB connection: clever env set MONGODB_URI `clever env | awk -F = '/MONGODB_ADDON_URI/ { print $2}'`
  • Set the production flag: clever env set NODE_ENV production
  • Set the secret used by the app: clever env set SECRET myVerySecretiveSecret
  • Add a domain name: clever domain add realworldMongoExpress.cleverapps.io

Which make your backend ready to be deployed 🙂

Moving on to the frontend.

  • Clone the frontend: git clone https://github.com/gothinkster/react-redux-realworld-example-app
  • Get in the project: cd react-redux-realworld-example-app
  • Create the Node.js application: clever create --type node realworld-frontend
  • Set the production flag: clever env set NODE_ENV production

Sadly this one requires a little tweaking to use environment variable for configuration. I have edited the file src/agent.js like so:

- const API_ROOT = 'https://conduit.productionready.io/api';
+ const API_ROOT =  process.env.API_ROOT || 'https://conduit.productionready.io/api';
  • Now I can configure the backend with clever env set API_ROOT https://realworldMongoExpress.cleverapps.io/api

Don't forget to commit your changes. And now you are ready to deploy 🙂

Deploy

Since it's a NodeJS application, the rule for deployment is simple. There has to be a main or scripts.start field in package.json. For the backend is ready so all you have to do is run clever deploy. That's it.

For the frontend we have a scripts.start but the PORT variable is hardcoded. So I simply removed it and commited my change:

- "start": "cross-env PORT=4100 react-scripts start",
+ "start": "cross-env react-scripts start",

Now it's ready for deployment. Again running clever deploy is all you need. Run clever open and your Medium clone will open in your default browser.

Is that it? Yes if you are not expecting too much traffic. But maybe you are indeed expecting traffic. Or maybe you don't know. Both situation are fine because Clever Cloud provides automatic scaling. Let's say you want to have 2 VM for the backend. This can be configured like this:clever scale --instances 2

If you are not sure about the frontend, you can setup a minimum of 2 and a maximum of 5 like this: clever scale --min-instances 2 --max-instances 5

That's it. You have deployed a MongoDB/Express backend and a React/Redux frontend in production. And you are ready for high level of traffic 🙂

Blog

À lire également

Clever Cloud announces 11 new products at its Clever Cloud Fest

Clever Cloud is celebrating its 15th anniversary with the Clever Cloud Fest on 6 and 7 February 2025 in Nantes. This event will bring together customers and partners, during which Clever Cloud will unveil 11 new products and an international growth strategy.
Company Événements Press

What is Clever AI?

AI services are everywhere, but the sheer number and diversity of them makes it harder for developers to manage them. All the more so when they work in a team. That's why we came up with Clever AI: a multi-vendor, multi-model range of solutions to simplify access to AI for businesses.
Company

Protect yourself: beware of job scams spoofing Clever Cloud’s brand

At Clever Cloud, we provide reliable, secure cloud hosting services for businesses and developers worldwide. Unfortunately, our reputation is being exploited by malicious actors engaging in fraudulent activities under the guise of our company name. We want to set the record straight and help protect you from falling victim to these scams.
Company