Animé par Jean-Baptiste KAISER - @ArendSyl
avec la participation de :
- Guillaume ASSIER : @GuillaumeAssier
- Eloi DEMOLIS : @Wonshtrum
- Sylvain WALLEZ : @bluxte

Épisode enregistré le 7 novembre 2023

👋 Venez discuter avec nous sur @clever_cloudFR pour nous dire ce que vous avez pensé de ce nouvel épisode.

➡️ Pour découvrir ou réécouter d’anciens épisodes c’est par ici !

Chapitrage et liens

00:01:24 Executive Order sur l’IA https://bsky.app/profile/dashishka.bsky.social/post/3kd25ppdlek2l
https://www.whitehouse.gov/briefing-room/presidential-actions/2023/10/30/executive-order-on-the-safe-secure-and-trustworthy-development-and-use-of-artificial-intelligence/

00:07:03 Platforme d’entrainement d’IA en pleine mer https://www.numerama.com/tech/1547042-pour-echapper-aux-regulations-sur-lia-une-entreprise-veut-creer-un-etat-en-pleine-mer.html

00:12:01 Adoption de WebGPU (and “Rust is the defacto standard for graphics in Rust”) https://www.youtube.com/watch?v=CklvTsKogTg

00:22:15 Alternant chez Orange le jour, dev de malwares la nuit
https://www.zdnet.fr/actualites/alternant-chez-orange-cyberdefense-le-jour-developpeur-de-programmes-malveillants-la-nuit-39962084.htm

00:28:43 React serveur
https://twitter.com/manekinekko/status/1717957681359495449

00:36:27 ChatGPT Builder
https://openai.com/blog/introducing-gpts
https://twitter.com/heyBarsee/status/1721792544814588141

00:46:50 Text to 3D generative AI
https://research.nvidia.com/labs/dir/magic3d/

00:51:28 #sanglicam
https://twitter.com/hashtag/sanglicam?f=live

00:56:42 Musique de fin
Eloi (6-10) : OOGIE BOOGIE'S SONG | The Nightmare Before Christmas | VoicePlay A Cappella Cover : https://www.youtube.com/watch?v=EbxkOntz2SA

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 :)