svelte reveal app

This is a project template for Svelte apps. It lives at https://github.com/jenaro94/svelte-reveal-template. You can see it live here

To create a new project based on this template using degit:

npx degit jenaro94/svelte-reveal-template svelte-reveal-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-reveal-app
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src/slides, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

Adding new slides

To add a new slide you can add a *.svelte file in the src/slides folder, then import it in index.js following the example.

import slide1 from './slide-1.svelte'
import slide2 from './slide-2/index.svelte'
import slide3 from './slide-3.svelte'

export {
    slide1,
    slide2,
    slide3
}

Changing the theme

This template uses reveal.js and here is a list of all the themes, to change the theme simply go to main.js and change import "../node_modules/reveal.js/dist/theme/black.css"; for another theme, the order in which this is imported is important to override revealjs.css defaults.

Other customizations

Reveal.js allows for many customizations, transitions, themes, Markdown, Markup, Controls, just visit their website for all of the docs.

Building and running in production mode

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.

Deploying to the web

With Vercel

Install vercel if you haven't already:

npm install -g vercel

Then, from within your project folder:

cd public
vercel deploy --name my-project

With surge

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public my-project.surge.sh