Skip to content

How to Host An Instance of Silex

Jump to bottom
Alex Hoyau edited this page May 28, 2024 · 46 revisions

This wiki is obsolete, it concerns Silex v2

⚠️ WARNING: Support for Silex v2 has stopped.

Please read Silex v3 "Getting started with self hosting" docs

This page explain how to run Silex yourself, in these contexts:

  • on a server
  • on your local computer as a native app (uses electron)
  • on your local computer built from the sources (multiple methods)
  • on your local computer as an npm dependency in your nodejs project
  • in a Docker container

This is useful to host a public instance of Silex or if you plan to work offline with your local files, or to contribute code to Silex or just to hack into Silex a bit :)

After reading this page you can then read "Silex for hosting providers", especially if your goal is to provide a website builder to your users, white labeled or not, and you want to provide the users with a hosting too, i.e. the user do not use Dropbox or FTP or Github, etc. but your hosting instead. If you plan to customize Silex with your own components, please refer to "Silex Developer Guide"

Feel free to ask any question in the issues here

Host an instance of Silex on a web server

If you plan to host Silex for your clients, your users or the community, this section is for you.

If you feel like helping and host an instance of Silex as an alternative to the official Silex site https://editor.silex.me/ please let us know so that we can advertise it to the community.

You will need a nodejs server, which you can setup yourself or host at Gandi or IndieHosters for example.

You will need to follow the same steps as the developers when they install silex locally on linux. See detailed instructions bellow.

For the lazy ones, there is the Heroku One-Click Deploy:

Deploy

This will simply bring you to this form and host Silex for free on your heroku account - you can set the env var ENABLE_FTP to true and proceed.

screenshot from 2018-09-05 12-44-39

Concerning environments variables, see the section bellow.

Installation on your local computer

As a native app, Silex desktop version

It works offline and can be downloaded from the releases here or you can build it with npm run build and then start with npm run start:electron (requirement: install Silex locally as explained before)

Silex desktop version

As a web app, Silex web version

This is for developers mostly, since our beloved designers can use the online version.

Developers you can clone this repository and start Silex, with nodejs. To do this you can use just nodejs or npm, see instructions bellow.

Recommended method: with npm

Prerequisite :

  • Nodejs - important: see the supported nodejs version here, even if it might work with other versions, it is not tested
  • Python 2.7 installed and in the path (for node-gyp build)
  • With linux you will also need g++ (for node-gyp build)
  • With windows 10 you need to use PowerShell instead of the default dos command line, and probably run as administrator
  • With windows you need to install MS build tools with this command: npm install --global --production windows-build-tools 
$ npm install -g silex-website-builder
$ silex

You can provide config options with these environment variables like this:

$ ENABLE_FTP=true ENABLE_SFTP=true silex

Silex file explorer will then look like this:

Silex file explorer with only FTP and SFTP

as an npm dependency in your project

See the page How To Add Silex To Your Node.js Project for this subject

with IIS as reverse proxy (Windows only)

You may want to make your local Silex instance available for your clients. On your Windows machine you can achieve this by using IIS as a reverse proxy. Just make sure the following prerequisites are met:

What's next?

  • follow the instructions on How To Add Silex To Your Node.js Project to install Silex. Make sure you also create the index.js file.
  • Add a Website by using the IIS manager.
  • You may now have a web.config file in your Silex root directory. If not, create one with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" requireAccess="Script" />
        </handlers>
        <!-- If your pathes contain spaces, you can wrap them in &quot; -->
        <httpPlatform startupTimeLimit="10" processPath="path\to\note\node.exe" arguments="&quot;path\to\silex\index.js&quot;" stdoutLogEnabled="false">
            <environmentVariables>
                <!-- You may not need to add your server url here if you edit proxy settings in IIS -->
                <environmentVariable name="SERVER_URL" value="your.domain.com" />
                <!-- The port is choosen by the handler. Setting it to %HTTP_PLATFOTM_PORT% is required! -->
                <environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
            </environmentVariables>           
        </httpPlatform>	
    </system.webServer>
</configuration>
  • make sure the IIS User (probably IUSR) has at least read rights to the Silex folder and its content.
  • You can now start your website via IIS Manager

You can add additional variables within enviornmentVariables.

Docker

If you need to run Silex from source code on Windows, the best way to go is to use Docker. A Dockerfile is already in the sources so it is easy to do. If you plan to add components or templates to Silex, or customize it in any way, then the best way is to add it as a dependency, not run it from source code, see How To Add Silex To Your Node.js Project.

You can use Silex official docker image or follow instructions bellow to build the docker image yourself

Build the docker image from source

Prerequisite :

Clone the project to your local computer

$ git clone [email protected]:silexlabs/Silex.git
$ cd Silex

Build the docker image for Silex

$ docker build -t silex-image .
$ docker run -p 6805:6805 -t silex-image

Open http://localhost:6805/ and you are ready!

The default env vars can be overriden using the -e option in docker run, see the section about env vars

$ docker run -p 6805:6805 -t -e ENABLE_FS=true -e FS_ROOT=/ -e GITHUB_CLIENT_ID=false silex-image

local installation on linux or macos or cloud9

Prerequisite:

Clone this repository

$ git clone https://github.com/silexlabs/Silex.git

Install all needed modules and build the assets

$ npm install
$ npm run build

note #1: Install as a non root user with write/read access to silex files and folders

note #2: If you have errors and it is about node-sass, try installing node-sass (npm install node-sass) before installing silex again

Start the server and then open http://localhost:6805/ - note that the port is 6805, which is easy to remember, since it is the date of sexual revolution started in paris france 8-)

$ npm start

Note for cloud9 users: you may want to activate python with this command:

$ nada-nix install python

And finally, take a look at the "available commands" section bellow

local installation on Windows

For windows you may need to use PowerShell instead of the default dos command line, and probably run as administrator

Prerequisite:

  • node.js installed, see the supported versions in the file .nvmrc
  • Git Client installed (e.g. windows github client)
  • NPM installed
  • python 2.7
  • If you get an error such as MSBUILD : error MSB4132: The tools version "2.0" is unrecognized. please try to install MS build tools with this command: npm install --global --production windows-build-tools

Installation of Silex:

Start Silex:

  • Launch Silex from a command prompt (Silex's Directory): npm start
  • Open your favorite browser on http://localhost:6805/ and ENJOY !!!
  • Also take a look at the "available commands" section bellow

Available commands when silex is installed locally

If you develop or debug Silex, these npm scripts can be used with npm (they are defined in the file package.json)

  • $ npm start will start the server
  • $ npm run start:debug will start the server in debug mode (no error catchall, enable local service to use local file system as a storage)
  • $ npm run start:electron start the electron app / Silex desktop version
  • $ npm run build will build the client side code (html, css, js), ready for production
  • $ npm run build:server:debug watch the src/server source folder and build the server nodejs app (from typescript source files)
  • $ npm run build:client:debug will watch the src/client source folder and build the client app (typescript)

environment variables

Silex config can be overriden with env vars or before passing the config to Silex

Tip: for your tests on localhost, you can use these test apps

$ export DROPBOX_CLIENT_ID=ckixgyo62obeo05
$ export DROPBOX_CLIENT_SECRET=ptg6u5iw7gs6r6o
$ export GITHUB_CLIENT_ID=f124e4148bf9d633d58b
$ export GITHUB_CLIENT_SECRET=1a8fcb93d5d0786eb0a16d81e8c118ce03eefece
$ export UNSPLASH_ACCESS_KEY=4bce6009ffa07149e179d7928bbf28cd15760e5393d17b172624945f935fef58
$ export UNSPLASH_APP_NAME='Silex V2'

Here are the env vars:

  • SERVER_URL base URL of your Silex instance, passed to OAuth services like github si they can come back to you with a token
  • PORT, optional, default: 6805, used here in the code
  • SSL_PORT, optional, default: to 443, used here in the code
  • SILEX_PATH, optional, default is '', useful if you serve Silex in a folder - not at the root of the domain, this will be added to SERVER_URL and cloud explorer paths automatically
  • SILEX_FORCE_HTTPS, optional used here in the code to force https/ssl (default is false)
  • SILEX_SSL_PRIVATE_KEY, optional (see ssl section bellow), used here in this source file
  • SILEX_SSL_CERTIFICATE, optional (see ssl section bellow), used here in this source file
  • SILEX_FORCE_HTTPS_TRUST_XFP_HEADER: optional, useful only if SILEX_FORCE_HTTPS is true, see the param trustXFPHeader in this doc
  • SILEX_SESSION_SECRET, optional, session secret, see the cookie-session module for more info (used in this source file)
  • SILEX_BEAUTIFY_EDITABLE: optional, ensure that Silex saves the HTML page and JSON data in a human readable format. This is especially useful if you work with git and several people are working on the same website at the same time, so that git can merge the files.
  • SILEX_DEBUG, optional, default: false, when true this will enable the service "www" (storage on the local server in www/) with login admin and pass admin
  • GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET: optional, to activate github service, you need to create a github app to get these info (create a github app to get those)
  • DROPBOX_CLIENT_ID and DROPBOX_CLIENT_SECRET: optional, this will activate Dropbox service, you need to create a Dropbox app on developers.dropbox.com
  • ENABLE_FTP, ENABLE_SFTP, ENABLE_WEBDAV, ENABLE_FS: optional, used to activate the corresponding services
  • FS_ROOT: optional, sets the path to filesystem if ENABLE_FS is true. The default value is the home dir of the user who started the server
  • FS_SHOW_HIDDEN: [Optional] Let the local file system show hidden files, defaults to false. Can take the values true, false or nothing
  • SILEX_ELECTRON: this is set by Silex electron app, in order to activate the fs service and access your file system from within Silex
  • SKIP_HOSTING_SELECTION: [Optional] Skip the hosting selection dialog. This is a publication setting. Set this value to true if you want the user to be forced to publish in the first hosting provider you enable. This is useful when you provide hosting to your users.
  • ENABLE_HOSTING_GH_PAGES: [Optional] Enable Github Pages hosting provider. This is a publication setting. Set this value to true if you want your users to be able to publish to Github Pages.
  • ENABLE_HOSTING_UNIFILE: [Optional] default is 'true'] Enable the user to select a folder to publish to. This is a publication setting. Set this value to false if you do not want your users to be able to manually select a folder when they try to publsh a website.
  • ENABLE_HOSTING_JEKYLL: [Optional] Enable Jekyll hosting provider. This is a publication setting. Set this value to true if you want the user to be able to publish their website as a template for a Jekyll website
  • UNSPLASH_ACCESS_KEY and UNSPLASH_APP_NAME: [Optional] Enable the unsplash image bank
  • UNSPLASH_OFFLINE_TEST_PATH: [Optional] When unsplash is activated, this is the path of a JSON file which is used in place of unsplash API for testing purpose and offline development. The JSON file needs to contain a JSON object with a search key which is supposed to contain what the unsplash API returns when doing a search

enable https / SSL

When you start Silex, it looks for the environment variables SILEX_SSL_PRIVATE_KEY and SILEX_SSL_CERTIFICATE. If they are present, it enables SSL.

SILEX_SSL_PRIVATE_KEY is expected to be the path to a .key file, and SILEX_SSL_CERTIFICATE the path to a .crt.

This is the documentation for Silex website builder. It is a collaborative effort, click edit and start contributing. Also have a look at these discussions.

WARNING: Support for Silex v2 has stopped. Try Silex v3 alpha, Read about it, Subscribe to the newsletter

Clone this wiki locally