On this page

Deploy static files

Overview

If you only need to serve static files without executing any code on the backend, for instance for a javascript Single Page Application (SPA), you can create a static application.

This runtime is based on apache, so shares a lot with the PHP runtime. This means you can use .htaccess files for redirection or access control.

Create an application on Clever Cloud

With the web console

Refer to our getting started for more details on application creation via the console.

With the Clever Tools CLI

  1. Make sure you have clever-tools installed locally or follow our CLI getting started guide.
  2. In your code folder, do clever create --type <type> <app-name> --region <zone> --org <org> where :
    1. type is the type of technology you rely on
    2. app-name the name you want for your application,
    3. zone deployment zone (par for Paris and mtl for Montreal)
    4. org the organization ID the application will be created under.

Refer to clever create for more details on application creation with Clever Tools.

Setting up environment variables on Clever Cloud

With the Clever Cloud console

  1. Go to the Clever Cloud console, and find the app you want to fine tune under it’s organization.
  2. Find the Environment variables menu and select it.
  3. In this menu, you will see a form with VARIABLE_NAME and variable value fields.
  4. Fill them with the desired values then select Add.
  5. Don’t forget to “Update Changes” at the end of the menu.

With the Clever Tools CLI

  1. Make sure you have clever-tools installed locally. Refer to our CLI getting started.
  2. In your code folder, do clever env set <variable-name> <variable-value>

Refer to environment variables reference for more details on available environment variables on Clever Cloud.

You can of course create custom ones with the interface we just demonstrated, they will be available for your application.

Environment injection

Clever Cloud injects environment variables from your application settings as mentioned in setting up environment variables and is also injecting in your application production environment, those from your linked add-ons.

Application deployment on Clever Cloud is via Git or FTP.

Git Deployment on Clever Cloud

You need Git on your computer to deploy via this tool. Here is the official website of Git to get more information: git-scm.com

Setting up your remotes

  1. The “Information” page of your app gives you your Git deployment URL, it looks like this:

    1. git+ssh://git@push.clever-cloud.com/<your_app_id>.git
    2. Copy it in your clipboard

  2. Locally, under your code folder, type in git init to set up a new git repository or skip this step if you already have one

  3. Add the deploy URL with git remote add <name> <your-git-deployment-url>

  4. Add your files via git add <files path> and commit them via git commit -m <your commit message>

  5. Now push your application on Clever Cloud with git push <name> master

Refer to git deployments for more details.

FTP Deployment

Make sure you have Filezilla or an other FTP software installed in your machine.

When you have chosen to deploy your application via FTP at the application creation, a free FS Bucket has been created with an ID matching your application’s ID.

You will find the FTP credentials in the configuration tab of this particular FS Bucket.

Just follow the instructions of your FTP Software to send code to Clever Cloud.

Refer to our Quick Start - FTP deployment for more details.

Linking a database or any other add-on to your application

By linking an application to an add-on, the application has the add-on environment variables in its own environment by default.

On add-on creation

Many add-ons do exist on Clever Cloud, please refer to the full list and check add-ons dedicated pages for full instructions.

During add-on creation, you will see Applications screen, with a list of your applications. You can toggle the button to Link and click next. If you finish the process of add-on creation, the application will automatically be linked to it.

Add-on already exists

In the Clever Cloud console, under the Service Dependencies menu of your application, you can use the Link addons dropdown menu to select the name of the add-on you want to link and use the add button to finish the process.

You can also link another application from the same page in the Clever Cloud console, using the Link applications dropdown menu.

More configuration

Need more configuration? To run a script at the end of your deployment? To add your private SSH key to access private dependencies?

Go check the Common configuration page.

You may want to have an advanced usage of your application, in which case we recommend you to read the Administrate documentation section.

If you can’t find something or have a specific need like using a non supported version of a particular software, please reach out to the support.

Serving index.html for SPA (Single Page Application) routers

When you work with an SPA framework like React, Vue.js, Angular…, you’re using client side routing. This means when you click on a link going to /the-page, your browser doesn’t make an HTTP request for /the-page. Instead, the client side router highjacks the clicks on links, changes the DOM to display the page and ask the browser to change the URL in the address bar to /the-page.

What happens if you try to refresh the page? If you do this, the browser will try to make an HTTP request for /the-page. In most situations, SPA only have one HTML document at the root called index.html. This is why, you’ll probably get a 404 error.

To fix this, most people using SPA frameworks configure their HTTP server to serve the index.html for all unkown requests. By this we mean for all requests that don’t have a matching file on disk to serve.

To do this with our static applications, you need a .htaccess file like this at the root of your project:

RewriteEngine On

# If an existing asset or directory is requested, serve it
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Comments