"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2913"],{7040:function(e,s,t){t.r(s),t.d(s,{default:()=>h,frontMatter:()=>r,metadata:()=>n,assets:()=>l,toc:()=>c,contentTitle:()=>d});var n=JSON.parse('{"id":"features/self-hosting","title":"Self-Hosting","description":"The LiveCodes app can be self-hosted on any static file server or CDN.","source":"@site/docs/features/self-hosting.mdx","sourceDirName":"features","slug":"/features/self-hosting","permalink":"/docs/features/self-hosting","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/self-hosting.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Security","permalink":"/docs/features/security"},"next":{"title":"Configuration","permalink":"/docs/configuration/"}}'),o=t("5893"),i=t("65");let r={},d="Self-Hosting",l={},c=[{value:"Guide",id:"guide",level:2},{value:"Custom Build",id:"custom-build",level:2},{value:"Services",id:"services",level:2},{value:"Example",id:"example",level:2},{value:"SDK Usage",id:"sdk-usage",level:2}];function a(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.header,{children:(0,o.jsx)(s.h1,{id:"self-hosting",children:"Self-Hosting"})}),"\n",(0,o.jsx)(s.p,{children:"The LiveCodes app can be self-hosted on any static file server or CDN."}),"\n",(0,o.jsx)(s.h2,{id:"guide",children:"Guide"}),"\n",(0,o.jsxs)(s.p,{children:["The built app can be obtained by ",(0,o.jsx)(s.strong,{children:"one of the following"})," ways:"]}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsxs)(s.p,{children:["Download the app from the ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/releases",children:"releases"}),", extract the folder and add it to your website."]}),"\n"]}),"\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsxs)(s.p,{children:["Fork the ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"GitHub repo"})," and clone it. You may wish to use the included setup to deploy to ",(0,o.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),":"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-shell",children:'git clone https://github.com/{your-username}/livecodes\ncd livecodes\nnpm install\nnpm build          # build the app to "build" directory\nnpm run serve      # locally serve to http://localhost:8080\n\n# deploy\nnpm run deploy     # build and deploy to github pages\n\n# for development\nnpm start          # start local development with code watch, rebuild and live-reload\n'})}),"\n"]}),"\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsxs)(s.p,{children:["Fork the ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"GitHub repo"})," and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. ",(0,o.jsx)(s.a,{href:"https://developers.cloudflare.com/pages/get-started",children:"Cloudflare Pages"}),", ",(0,o.jsx)(s.a,{href:"https://vercel.com/docs/concepts/git",children:"Vercel"}),", ",(0,o.jsx)(s.a,{href:"https://docs.netlify.com/configure-builds/overview/",children:"Netlify"}),", ",(0,o.jsx)(s.a,{href:"https://firebase.google.com/docs/hosting/github-integration",children:"Firebase"}),"). When prompted, the build command is ",(0,o.jsx)(s.code,{children:"npm run build"})," and the build output directory is ",(0,o.jsx)(s.code,{children:"build"}),"."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"custom-build",children:"Custom Build"}),"\n",(0,o.jsxs)(s.p,{children:["By default, when building the app, it is expected to be hosted on the root of the domain/subdomain (e.g. ",(0,o.jsx)(s.code,{children:"https://my-website.com"})," or ",(0,o.jsx)(s.code,{children:"https://playground.my-website.com"}),"). The documentation is also hosted in the ",(0,o.jsx)(s.code,{children:"/docs/"})," directory (e.g. ",(0,o.jsx)(s.code,{children:"https://my-website.com/docs"}),")."]}),"\n",(0,o.jsxs)(s.p,{children:["If you wish to host the app in a subdirectory (e.g. ",(0,o.jsx)(s.code,{children:"https://my-username.github.io/playground/"}),"), the base URL of the documentation directory needs to be supplied by the environment variable ",(0,o.jsx)(s.code,{children:"DOCS_BASE_URL"})," during build."]}),"\n",(0,o.jsx)(s.p,{children:"Example:"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-shell",children:'npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build\n'})}),"\n",(0,o.jsxs)(s.p,{children:["If you do not want to build documentations and direct all links to documentations to ",(0,o.jsx)(s.a,{href:"https://livecodes.io/docs/",children:"https://livecodes.io/docs/"}),", use the following command:"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-shell",children:"npx cross-env DOCS_BASE_URL=null npm run build:app\n"})}),"\n",(0,o.jsx)(s.h2,{id:"services",children:"Services"}),"\n",(0,o.jsxs)(s.p,{children:["Some of the ",(0,o.jsx)(s.a,{href:"/docs/advanced/services",children:"services"})," used by the app are not supported on ",(0,o.jsx)(s.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," deploys and are either replaced by other compatible services (e.g. the ",(0,o.jsx)(s.a,{href:"/docs/features/share",children:"share"})," service uses ",(0,o.jsx)(s.a,{href:"https://dpaste.com/",children:"dpaste"})," for short URLs, which are ",(0,o.jsx)(s.a,{href:"https://dpaste.com/help",children:(0,o.jsx)(s.strong,{children:"deleted after 365 days"})}),") or require you to provide an alternative service (e.g. ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts",children:"Firebase configuration"})," for authentication)."]}),"\n",(0,o.jsxs)(s.p,{children:["You may wish to edit one or more of the used ",(0,o.jsx)(s.a,{href:"/docs/advanced/services",children:"services"})," to use your own."]}),"\n",(0,o.jsx)(s.admonition,{type:"info",children:(0,o.jsxs)(s.p,{children:["LiveCodes ",(0,o.jsx)(s.a,{href:"/docs/sponsor",children:"sponsors"})," (Bronze sponsors and above) get access to managed custom services."]})}),"\n",(0,o.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,o.jsxs)(s.p,{children:["This is an example of a self-hosted deployment, that was deployed to ",(0,o.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub Pages"})," using the ",(0,o.jsx)(s.a,{href:"#guide",children:"built-in setup"}),":"]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.a,{href:"https://live-codes.github.io/livecodes/",children:"https://live-codes.github.io/livecodes/"})}),"\n",(0,o.jsx)(s.h2,{id:"sdk-usage",children:"SDK Usage"}),"\n",(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})," can still be used with the self-hosted app by providing the ",(0,o.jsx)(s.a,{href:"/docs/sdk/js-ts#appurl",children:(0,o.jsx)(s.code,{children:"appUrl"})})," ",(0,o.jsx)(s.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed option"}),"."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",metastring:'title="index.js"',children:"import { createPlayground } from 'livecodes';\n\nconst options = {\n  appUrl: 'https://playground.my-website.com',\n  template: 'react',\n  // other embed options\n};\ncreatePlayground('#container', options);\n"})})]})}function h(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},65:function(e,s,t){t.d(s,{Z:function(){return d},a:function(){return r}});var n=t(7294);let o={},i=n.createContext(o);function r(e){let s=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:s},e.children)}}}]);