This project is a starting point for applications using Svelte and October CMS. It also comes with support for Tailwind CSS, as this framework pairs beautifully with Svelte.
Notice: This is still experimental, be careful before taking it to production. In the future, we hope to provide deployment guides for the Laravel ecosystem with Forge and Envoyer.
The first step to creating a Sveltober theme is to clone this repository into October's /themes
directory.
git clone [email protected]:scottbedard/sveltober.git
Once this is done, run a yarn install
from your new theme directory. After doing this, the following commands will be available.
# start webpack dev server
yarn dev
# build production assets
yarn build
This theme uses server side rendering, and as such requires a Node environment. With Laravel Homestead, and many other environments, it should already installed for you. All routes are pointed at the compiled index.htm
, which feeds the request into our Svelte application. Our client-side application then hydates the DOM, and things behave as a SPA from then on.
If you'd like to opt-out of server side rendering, this can be achieved with the following steps.
server
config from webpack.config.js
.client
webpack config, set hydratable
to false
, and in /src/main.js
set hydrate
to false
.ssr.js
, and the onStart
and interpolation content from src/index.htm
.Routing is currently being handled by svelte-routing
, see their readme for documentation. Out of the box, a few routes have are scaffolded for you to demonstrate the basic ideas. If you're using SSR, be aware that the order of your routes matter.