Documentation
Applications
Static

Static

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 Quickstart 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.

Custom build configurations

On Clever Cloud you can define some build configuration: like the app folder to deploy or the path to validate your application deployment is ready To do that follow the documentation here and add the environement variable you need.

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 chose to deploy your application via FTP at the application creation, the system creates a free FS Bucket with an ID matching your application’s ID.

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.

⚠️ An FTP application automatically starts once you create the application, even if you don’t send any code yet.

Refer to 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: refer to the full list and check add-ons dedicated pages for full instructions.

During add-on creation, an Applications screen appears, 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 is automatically 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 add-ons 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

Apache Configuration with CC_WEBROOT

If you set the CC_WEBROOT = /<web-folder> environment variable, make sure you put your .htaccess file at the root of your /<web-folder>. This is where Apache will look for directives when you deploy an application in a Static runtime.

If you don’t set the CC_WEBROOT environment variable, the root of your project is the root of your web server.

Last updated on