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 🙂