Livecodes playground

Search (⌘+K)

SearchSearch

Self hosting

May 15, 20242 min read

See the Self-hosting documentation for further up-to-date details.

Fork, clone and install

Fork the live-codes/livecodes GitHub repo and clone it. You may wish to use the included setup to deploy to GitHub Pages (see steps below):

git clone https://github.com/{your-username}/livecodes
cd livecodes
npm install

Build, serve and deploy

# build the app to "build" directory
npm build
# or to deploy via username.github.io (see `Build and publish to Github` below)
npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build
# locally serve to http://localhost:8080
npm run serve
# build and deploy to github pages
# (see `Build and publish to Github` below)
npm run deploy
# for development
# w/ code watch, rebuild and live-reload
npm start

Build and publish to Github

If you wish to host the app on Github pages, the base URL of the documentation directory needs to be supplied by the environment variable DOCS_BASE_URL during build.

# e.g. https://{your-username}.github.io/playground/
npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build

Complete these steps before deploying via npm run deploy

  1. Under your Github profile, navigate to Settings > Developer settings > Fine-grained tokens.

  2. Click Generate new token.

  3. Name the token GH_ACTIONS_REPO_PAT, choose expiration date and give it a description.

  4. Under Repository access, select Only select repositories and select the appropriate repository.

  5. Under Permissions > Repository permissions > Actions, select Read and write.

  6. Click the Generate token button at the bottom of the page.

    Your token will be generated. Make sure to copy your personal access token now as you will not be able to see it again.

  7. Go to https://github.com/{your-username}/livecodes

  8. Click Settings in the menu

  9. Click Environments in the menu

  10. Click github-pages

  11. Under Environment secrets, click Add secret

  12. Name the secret GH_ACTIONS_REPO_PAT and paste your token from step 6.

  13. Click Add secret button

  14. Click Pages in the left-side menu

  15. Choose the Source > Deploy from a branch.

  16. Select the gh-pages branch with /(root) folder and click the Save button.

  17. After some time, the page will refresh with:

    • Your site is live at https://{your-username}.github.io/livecodes/
    • Click the Visit site button to see the deployed Livecodes instance hosted by Github

Previous: Plugins settings

Graph view

Related