Commit 0be35789 authored by David Trattnig's avatar David Trattnig
Browse files

Initial commit of clock.

*Looking for a shareable component template? Go here --> [sveltejs/component-template](*
# svelte app
This is a project template for [Svelte]( apps. It lives at
To create a new project based on this template using [degit](
npx degit sveltejs/template svelte-app
cd svelte-app
*Note that you will need to have [Node.js]( installed.*
## Get started
Install the dependencies...
cd svelte-app
npm install
...then start [Rollup](
npm run dev
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, 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`.
## 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](
## Single-page app mode
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
"start": "sirv public --single"
## Deploying to the web
### With [now](
Install `now` if you haven't already:
npm install -g now
Then, from within your project folder:
cd public
now deploy --name my-project
As an alternative, use the [Now desktop client]( and simply drag the unzipped project folder to the taskbar icon.
### With [surge](
Install `surge` if you haven't already:
npm install -g surge
Then, from within your project folder:
npm run build
surge public
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public"
"devDependencies": {
"@rollup/plugin-commonjs": "^11.0.0",
"@rollup/plugin-node-resolve": "^7.0.0",
"rollup": "^1.20.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^5.1.2",
"svelte": "^3.0.0"
"dependencies": {
"sirv-cli": "^0.4.4"
html, body {
position: relative;
width: 100%;
height: 100%;
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
a {
color: rgb(0,100,200);
text-decoration: none;
a:hover {
text-decoration: underline;
a:visited {
color: rgb(0,80,160);
label {
display: block;
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
input:disabled {
color: #ccc;
input[type="range"] {
height: 0;
button {
color: #333;
background-color: #f4f4f4;
outline: none;
button:disabled {
color: #999;
button:not(:disabled):active {
background-color: #ddd;
button:focus {
border-color: #666;
<!DOCTYPE html>
<html lang="en">
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
plugins: [
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
browser: true,
dedupe: ['svelte']
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
watch: {
clearScreen: false
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
export let name;
<h1>Hello {name}!</h1>
<p>Visit the <a href="">Svelte tutorial</a> to learn how to build Svelte apps.</p>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
@media (min-width: 640px) {
main {
max-width: none;
\ No newline at end of file
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
export default app;
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment