├── .eslintrc.json ├── .gitignore ├── README.md ├── package.json ├── public └── index.html ├── src ├── App.svelte ├── main.js ├── router.js └── views │ ├── Hello.svelte │ ├── Index.svelte │ └── Something.svelte └── webpack.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "standard", 7 | "parser": "babel-eslint", 8 | "globals": { 9 | "Atomics": "readonly", 10 | "SharedArrayBuffer": "readonly" 11 | }, 12 | "parserOptions": { 13 | "ecmaVersion": 2018, 14 | "sourceType": "module" 15 | }, 16 | "plugins": ["svelte3"], 17 | "rules": { 18 | "import/first": false 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | package-lock.json 4 | yarn.lock 5 | dist -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte app 2 | 3 | This is a project template for [Svelte](https://svelte.technology) apps with routing and lazy-loading. 4 | 5 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 6 | 7 | ```bash 8 | npx degit OrdinaryJellyfish/svelte-routing-template svelte-app 9 | cd svelte-app 10 | ``` 11 | 12 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 13 | 14 | 15 | ## Get started 16 | 17 | Install the dependencies... 18 | 19 | ```bash 20 | cd svelte-app 21 | npm install 22 | ``` 23 | 24 | ...then start webpack: 25 | 26 | ```bash 27 | npm run dev 28 | ``` 29 | 30 | Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes. 31 | 32 | 33 | ## Deploying to the web 34 | 35 | ### With [now](https://zeit.co/now) 36 | 37 | Install `now` if you haven't already: 38 | 39 | ```bash 40 | npm install -g now 41 | ``` 42 | 43 | Then, from within your project folder: 44 | 45 | ```bash 46 | now 47 | ``` 48 | 49 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 50 | 51 | ### With [surge](https://surge.sh/) 52 | 53 | Install `surge` if you haven't already: 54 | 55 | ```bash 56 | npm install -g surge 57 | ``` 58 | 59 | Then, from within your project folder: 60 | 61 | ```bash 62 | npm run build 63 | surge public 64 | ``` 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "@vue/preload-webpack-plugin": "^1.1.0", 6 | "babel-eslint": "^10.0.1", 7 | "cross-env": "^5.2.0", 8 | "css-loader": "^2.1.1", 9 | "eslint": "^5.16.0", 10 | "eslint-config-standard": "^12.0.0", 11 | "eslint-plugin-import": "^2.17.2", 12 | "eslint-plugin-node": "^8.0.1", 13 | "eslint-plugin-promise": "^4.1.1", 14 | "eslint-plugin-standard": "^4.0.0", 15 | "html-webpack-plugin": "^3.2.0", 16 | "mini-css-extract-plugin": "^0.6.0", 17 | "page": "^1.11.4", 18 | "serve": "^11.0.0", 19 | "style-loader": "^0.23.1", 20 | "svelte": "^3.0.0", 21 | "svelte-loader": "2.13.3", 22 | "webpack": "^4.30.0", 23 | "webpack-cli": "^3.3.0", 24 | "webpack-dev-server": "^3.3.1" 25 | }, 26 | "scripts": { 27 | "build": "cross-env NODE_ENV=production webpack", 28 | "dev": "webpack-dev-server --content-base public --history-api-fallback", 29 | "lint": "eslint . --ext .js,.svelte", 30 | "fix": "eslint . --ext .js,.svelte --fix" 31 | }, 32 | "dependencies": { 33 | "eslint-plugin-svelte3": "^1.0.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.body 5 | }) 6 | 7 | window.app = app 8 | 9 | export default app 10 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store' 2 | import router from 'page' 3 | 4 | export const page = writable({ 5 | component: null, 6 | props: {} 7 | }) 8 | 9 | router('/', () => 10 | import(/* webpackChunkName: "index" */ './views/Index.svelte').then(module => 11 | page.set({ component: module.default }) 12 | ) 13 | ) 14 | 15 | router('/something', () => 16 | import(/* webpackChunkName: "something" */ './views/Something.svelte').then( 17 | module => page.set({ component: module.default }) 18 | ) 19 | ) 20 | 21 | router('/hello/:name', ctx => 22 | import(/* webpackChunkName: "hello" */ './views/Hello.svelte').then(module => 23 | page.set({ component: module.default, props: ctx.params }) 24 | ) 25 | ) 26 | 27 | export default router 28 | -------------------------------------------------------------------------------- /src/views/Hello.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Hello, {name}!

6 | 7 | -------------------------------------------------------------------------------- /src/views/Index.svelte: -------------------------------------------------------------------------------- 1 |

Hello, world!

2 | 3 | Something -------------------------------------------------------------------------------- /src/views/Something.svelte: -------------------------------------------------------------------------------- 1 |

This is... something.

-------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin') 4 | const path = require('path') 5 | 6 | const mode = process.env.NODE_ENV || 'development' 7 | const prod = mode === 'production' 8 | 9 | module.exports = { 10 | entry: './src/main.js', 11 | resolve: { 12 | extensions: ['.mjs', '.js', '.svelte'] 13 | }, 14 | output: { 15 | path: path.resolve(__dirname, './dist'), 16 | filename: 'js/[name].[hash].js', 17 | chunkFilename: 'js/[name].[hash].js', 18 | publicPath: '/' 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.svelte$/, 24 | exclude: /node_modules/, 25 | use: { 26 | loader: 'svelte-loader', 27 | options: { 28 | emitCss: true, 29 | hotReload: true 30 | } 31 | } 32 | }, 33 | { 34 | test: /\.css$/, 35 | use: [ 36 | /** 37 | * MiniCssExtractPlugin doesn't support HMR. 38 | * For developing, use 'style-loader' instead. 39 | * */ 40 | prod ? MiniCssExtractPlugin.loader : 'style-loader', 41 | 'css-loader' 42 | ] 43 | } 44 | ] 45 | }, 46 | mode, 47 | plugins: [ 48 | new MiniCssExtractPlugin({ 49 | filename: 'css/[name].[hash].css' 50 | }), 51 | new HtmlWebpackPlugin({ 52 | template: 'public/index.html', 53 | minify: prod 54 | ? { 55 | collapseWhitespace: true 56 | } 57 | : false 58 | }), 59 | new PreloadWebpackPlugin({ 60 | rel: 'prefetch' 61 | }) 62 | ], 63 | devtool: prod ? false : 'source-map' 64 | } 65 | --------------------------------------------------------------------------------