A fully open source, adaptable platform for building and running a modern online publication. We power blogs, magazines and journalists from Zappos to Sky News.

Your local blog installation

mkdir myblog
cd myblog
ghost install local

[ldoguin@caolila:~/myblog]$ ls
content/  current@  versions/  config.development.json

rm content/themes/casper/
cp -r current/content/themes/casper/ content/themes/
git init
cd content/themes/
git submodule add https://github.com/curiositry/mnml-ghost-theme
git submodule add https://github.com/zutrinken/attila/

Your blog on Clever Cloud

clever create --type node myblog # create a node application
clever addon create mysql-addon --plan s_sml myblogsql # create a MySQL database
clever service link-addon myblogsql # Link the database to the application
clever env set NODE_ENV production # setup environment variable for production
clever env set CC_PRE_RUN_HOOK ./clevercloud.sh # run a specific script before the build phase
clever domain add mysuperblog.cleverapps.io # Add a test domain name

Installing Ghost for your Clever Cloud Application

#!/bin/sh
npm install -g ghost-cli # install ghost-cli on Clever Cloud
mkdir ghost # create a folder for a new local instance of Ghost
cd ghost
ghost install local
ghost stop
cp ../config.production.json . # copy the production configuration

Configure Ghost for Production

{
  "server": {
    "port": 8080,
    "host": "0.0.0.0"
  },
  "database": {
    "client": "mysql"
  },
  "mail": {
    "transport": "Direct"
  },
  "process": "local",
  "logging": {
    "level": "debug",
    "transports": [
      "stdout"
    ]
  },
  "paths": {
    "contentPath": "../../../content/"
  }
}

clever env set database__connection__host btxgsb7xrhkuydlmb3zr-mysql.services.clever-cloud.com
clever env set database__connection__user ukf6bzfjgd2eg0iw
clever env set database__connection__password 87xRmGJljF3aSgGullm
clever env set database__connection__database btxgsb7xrhkuydlmb3zr
clever env set database__connection__port 20222
clever env set url https://mysuperblog.cleverapps.io/

Run Ghost

{
    "name": "ghost",
    "version": "0.1.0",
    "description": "",
    "scripts": {
        "start": "ghost run --dir ghost"
    },
    "devDependencies": {
    },
    "dependencies": {
    }
}

Ignoring local development files

.ghost-cli
config.development.json
current
versions

Git push to Production

git add clevercloud.sh package.json config.production.json content
git commit -m "Initial commit"
clever deploy

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

Parse Server

Deploy on Clever Cloud

1. First, you need to clone this repository (or use an existing one) and modify the Parse Server instanciation:

   var api = new ParseServer({
     databaseURI: process.env.MONGODB_ADDON_URI, // Use the MongoDB URI
     cloud: process.env.CLOUD_CODE_MAIN || __dirname + '/cloud/main.js',
     appId: process.env.PARSE_APPID, // Use environment variable to set the APP_ID
     masterKey: process.env.PARSE_MASTERKEY // Use environment variable to set the PARSE_MASTERKEY
   });
   

2. Open the Clever Cloud Console, create an account if you don't have one yet
3. Create a Node.js application and a MongoDB addon
4. Add these two environment variables: PARSE_APPID: <parseAppID>, PARSE_MASTERKEY: <parseMasterKey>
5. Follow the instructions about adding the remote to your local git repository
6. Deploy it: git push clever master and head to your application's logs

Lately, a lot of developpers asked us about Meteorjs support on Clever Cloud. This is indeed a growing technology out there, so I decided to test it myself.

What is Meteorjs ?

Meteor.js is based on Nodejs and is a real-time cross-platform web application framework (Web, Android and iOS). One of its main features is to automatically propagate data changes to clients in real-time or even query the database from the client (well, the client has a cache of the database which will update the remote one). It is an easy framework to build reactive applications

How to deploy on Clever Cloud

As an example of a large Meteor application, I will use TelescopeJS. It's a social news application you can configure the way you want. I'll use the version v0.14.2 since it does not require MongoDB 3.0. This is a version we will provide in a near future.

1- Clone

So first, git clone https://github.com/TelescopeJS/Telescope && cd Telescope && git checkout v0.14.2 and run it: meteor run. Then open http://localhost:3000, you should see the default page with some examples.

2- Install and build

To make it run on Clever Cloud, we have to make our own install script. This script will run when you deploy your application and build what's needed. Create an install.sh file and paste the following lines (or download it from Github):

#! /bin/bash

# Current path
currentPath=$(realpath ./)

# Install Meteorjs
curl https://install.meteor.com/ | sh
export PATH=/home/bas/.meteor:$PATH

# Install demeteorizer
cd ~/ && npm install demeteorizer

# Go back to our project
cd "$currentPath"

# Note: When using "meteorhacks:npm"
# to prevent the error: "unknown package: npm-container"
# (described in https://github.com/meteorhacks/npm/issues/49)
# uncomment the two following lines:
#meteor remove npm-container
#meteor run

# demeteorize the app
~/node_modules/.bin/demeteorizer -a "my_app" -o my_app/

# Go inside our demeteorized app to install modules
cd my_app/

# Install modules
npm install

This script will install Meteorjs on our platform, demeteorize the app (i.e. convert it as a regular node.js application) and install its modules. If you are using the package npm-container from meteorhacks, you HAVE to uncomment lines 20 and 21 (this is not our case here). Do not forget to do a chmod +x install.sh to give it execution rights.

Now we have to create our package.json (which is the file which describe your application for NPM): npm init. Open it and create a scripts section:

"scripts":{
  "install": "./install.sh",
  "start": "node my_app/main.js"
}

(my_app/main.js is a file generated by demeteorizer, do not modify this line)

Then, you can commit your changes: git add package.json install.sh && git commit -m "Clever Cloud setup"

Configuration

Once done, we need to create a Node.js application and a MongoDB addon and configure it. Open the dashboard and:

Addon

• Add an addon
• Select MongoDB, choose your plan and name it.
• Click it in the blue pane on your left, go into its configuration tab and copy somewhere the Connection URI field

Application

• Add an application
• Choose node.js for the language
• Choose the scalers you want (the default configuration is enough most of the time)
• Name it
• We don't need an addon since we've just created it
• Environment variables: You have to create 2 of them: ROOT_URL (url of you application) and MONGO_URL (the Connection URI field you saved)
• Follow instructions to add the remote repository, git push and it will deploy.

Your application should now be deployed, feel free to contact our support if you have any troubles!

UPDATE: This article is a little bit old, but some users decided to write a more recent documentation here on how to deploy a Ghost blog on Clever Cloud

1. Retrieve Ghost files

In order to download Ghost files, just visit this page : https://en.ghost.org/download/

Extract the file and put the folder in your favorite place.

2. Open an account on Clever Cloud

Just visit the signup page and follow the steps.

3. Create an application

Add a Node.js application.

More information available in our documentation : http://doc.clever-cloud.com/clever-cloud-overview/add-application/

4. Create a File System Bucket

Let’s store the data!

When you deploy an application, a new instance is created. If you do not persist content files like articles and images, you will lose them between two deployments.

In order to store these files, we have created FS (File System) buckets.

Just add one in the services section.

More information can be found in our documentation : https://doc.clever-cloud.com/databases-and-services/fs-buckets/

You will receive the credentials by email. At the root of the application, create a clevercloud/buckets.json file with the following structure:

[
  {
    "bucket" : "bucketId",
    "folder" : "/content"
  }
]

It tells the application to use the files located in the content directory in the FS Bucket.

With the FTP credentials, upload the files located in your local content folder to the remote FTP folder. At the root of the FTP folder, you should have /data, /images, etc. folders.

5. Ghost Configuration

You have to tell Ghost how you would like to use it by editing the /config.js.

In both development and production sections:

• change host to 0.0.0.0
• change port to 8080

6. Deploy the application

Last operation, push the local files to the cloud!

Deploy your application on Clever Cloud is very easy. Just type the following commands:

• init the git repository : git init
• create a .gitignore file like this:

node_modules
content

• add all files: git add .
• commit: git commit -m firstcommit
• push to Clever Cloud: git push <ccremoteurl> master

You can then check the logs in the left panel logs section.

Not happy with SQLite? Go MySQL

If you do not want to deal with SQLite storage, you can store your data in MySQL.

To do this, replace the following section:

database: {
  client: 'sqlite3',
  connection: {
    filename: path.join(__dirname, '/content/data/ghost-test.db')
  }
}

with:

database: {
  client: 'mysql',
  connection: {
    host: 'yourhostname',
    user: 'yourusername',
    password: 'yourpassword',
    database: 'yourdbname',
    charset: 'utf8'
  }
}

You can create a MySQL database on Clever Cloud in 5 seconds.

Want to send emails?

Ghost require external mail providers so that you can send emails. Some of them are Mailjet, Mailchimp, Mailgun or Gmail.

The following example allow you to send emails with your Gmail/Google Apps accound from Ghost :

mail: {
  transport: 'SMTP',
  fromaddress: 'myemail@address.com',
  options: {
    auth: {
      user: 'youremail@gmail.com',
      pass: 'yourpassword'
    }
  }
}

Feel free to ask us if you have any questions about this article.

Npmjs.org, the Nodejs dependencies repository has recently experienced outages which have blocked every Nodejs application deployment on every server in the world which use this repository including Clever Cloud ones.

Actually, when an application is launched locally or on a PaaS like ours, the application has to download all its dependencies. If the repository server is down, the application cannot download the dependencies and the deployment fails.

In order to provide a better deployment experience, we have built our own dependencies mirror so that we do not need to use npmjs.org servers anymore when deploying applications.
Deployments are now always successful even if npmjs.org is down. Moreover, instead of downloading dependencies from the US, they are downloaded locally so applications deployments are twice faster.

A very good reason to deploy a Nodejs application on Clever Cloud!

The Clever Cloud team

Version française

Npmjs.org, le dépôt officiel de dépendances Nodejs a récemment subi des interruptions qui ont bloquées les déploiements sur tous les serveurs du monde qui utilisaient ce dépôt officiel, y compris ceux de Clever Cloud.

En effet, lorsqu’une application est lancée localement ou bien sur un PaaS comme le notre, l’application doit télécharger ses dépendances sur des serveurs distants. Si le serveur contenant les dépôts de ces dépendances n’est pas disponible, l’application ne peut pas les récupérer et le déploiement échoue.

Dans le but d’améliorer le déploiement des applications Nodejs, nous avons créé notre propre mirroir de dépendances afin de ne plus avoir à utiliser de nouveau les serveurs npmjs.org lors de nos déploiements. Ces derniers ne sont donc plus tributaires des interruptions de npmjs.org. De plus, puisque les dépôts sont téléchargés de nos serveurs et non plus des Etats-Unis, les déploiements sont deux fois plus rapides.

Une bonne occasion donc de déployer dès à présent votre application Nodejs sur Clever Cloud !

L’équipe Clever Cloud

Many users ask us if WebSocket is supported on Clever Cloud. Of course it is! WebSocket works like a charm with PlayFramework 2 and Node.js apps deployed on Clever Cloud.

You can check a small demo we have uploaded right here:
nodejs-demo.cleverapps.io (be sure to have a mate visiting this link at the same time)

If you want to try some experiments on Clever Cloud, here are some ressources with WebSocket use cases:

• socket.io: A powerful JS framework to enable WebSocket in your projects.
• Real-time Paint-like with Play: A great tutorial to check Play’s real time abilities.
• Learn real time with node.js If you’re new to node.js, CodeSchool may help you.

Have fun