Skip to content

Silex Developer Guide

Alex Hoyau edited this page Sep 21, 2021 · 25 revisions

This document is a work in progress, we need your help, ask questions in the issues and add info here please

Here you will find useful documentation and links for customizing and extending Silex. It is the reference for those who host their own instance of Silex, integrated or not in their infrastructure. Interesting for web agencies or hosting companies or people willing to provide Silex to their community.

Related pages:

Build locally

See the page How to Host An Instance of Silex for that

Add Silex as an npm dependency to your project

You will want to do that when you need to customize Silex a lot. If you want simple customizations, simply install Silex and use the env vars

Here is an example of a more advanced customization (with the config object)

Step by step guide: How To Add Silex To Your Node.js Project

Create components

Please refer to Create Silex components

Create templates

Please refer to Create templates for Silex

Integrate Silex with your infrastructure

Please refer to Integrate Silex with your infrastructure

Contribute code to the core

Let's discuss it beforehand in the issues please, we will definitely help you get started.

Other projects which need your help!

These are the projects used in Silex and maintained by the same team:

  • unifile, a nodejs library which provides a unified access to cloud services
  • Cloud explorer, a file manager for the cloud services. It is a front end javascript app which connects to a unifile server
  • Stage, a stage component to add a drag and drop to your project
  • Prodotype, Build components and generate a UI to make them editable in your app
  • Resonsize, preview websites at different sizes

CloudExplorer, unifile and Prodotype are separate projects maintained by the same team. Force Silex to use your local local clones of these projects, use npm link:

$ cd path/to/CloudExplorer/
$ npm link
$ cd path/to/Silex/
$ npm link CloudExplorer

Responsize is another project used by Silex and maintained by us. It is hosted on its own server and acts like a third-party service. When you will do a pull request and it gets merged, it will deploy on the server.

The 3 APIs of Silex

1- Front end API

This is a way to customize the websites with CCS and Javascript code. Enter the code in Silex JS editor and CSS editor

You can read more about the front end API and how to add features to a website created with Silex with Javascript.

2- Editor's API

This API is available in the editor, you can add Silex to a new project and use Silex editor's API to create new features or customize Silex editor.

See Silex Editor API for more info on this topic

3- Back-end API

Usually you will want to customize Silex backend in order to add "cloud services" or "unifile services" which give your users the ability to read/write their site and assets from/to your servers. Or you may want your users to publish to your servers. Please read more about this in the page Silex for hosting providers.

Also you can add code to Silex server app which is a nodejs app and has many hooks. Unfortunately this is not documented yet, please ask the forum and help make a doc. In order to get you started, you can look at the stastic project which add routes, loads custom script on the front end etc.

Submit your code

Issue to discuss the feature and implementation

Please create an issue when you start working and let us a chance to discuss it before hand

Tests

You need to manually test the behavior of your feature and its effect on the user's website

  • In the editor
  • Outside the editor in preview
  • In the final published website

Pull request

Documentation

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

Clone this wiki locally