Skip to main content

Self-Hosting

The LiveCodes app can be self-hosted on any static file server or CDN.

Guide​

The built app can be obtained by one of the following ways:

  • Download the app from the releases, extract the folder and add it to your website.

  • Fork the GitHub repo and clone it. You may wish to use the included setup to deploy to GitHub Pages:

    git clone https://github.com/{your-username}/livecodes
    cd livecodes
    npm install
    npm build          # build the app to "build" directory
    npm run serve      # locally serve to http://localhost:8080

    # deploy
    npm run deploy     # build and deploy to github pages

    # for development
    npm start          # start local development with code watch, rebuild and live-reload

  • Fork the GitHub repo and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. Cloudflare Pages, Vercel, Netlify, Firebase). When prompted, the build command is npm run build and the build output directory is build.

Custom Build​

By default, when building the app, it is expected to be hosted on the root of the domain/subdomain (e.g. https://my-website.com or https://playground.my-website.com). The documentation is also hosted in the /docs/ directory (e.g. https://my-website.com/docs).

If you wish to host the app in a subdirectory (e.g. https://my-username.github.io/playground/), the base URL of the documentation directory needs to be supplied by the environment variable DOCS_BASE_URL during build.

Example:

npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build

If you do not want to build documentations and direct all links to documentations to https://livecodes.io/docs/, use the following command:

npx cross-env DOCS_BASE_URL=null npm run build:app

Services​

Some of the services used by the app are not supported on self-hosted deploys and are either replaced by other compatible services (e.g. the share service uses dpaste for short URLs, which are deleted after 365 days) or require you to provide an alternative service (e.g. Firebase configuration for authentication).

You may wish to edit one or more of the used services to use your own.

info

LiveCodes sponsors (Bronze sponsors and above) get access to managed custom services.

Example​

This is an example of a self-hosted deployment, that was deployed to GitHub Pages using the built-in setup:

https://live-codes.github.io/livecodes/

SDK Usage​

The SDK can still be used with the self-hosted app by providing the appUrl embed option.

index.js
import { createPlayground } from 'livecodes';

const options = {
  appUrl: 'https://playground.my-website.com',
  template: 'react',
  // other embed options
};
createPlayground('#container', options);
Sponsors