├── .gitignore ├── LICENSE ├── README.md ├── esbuild.js ├── package.json ├── public ├── favicon.png ├── global.css └── index.html └── src ├── App.svelte └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public/build 3 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Alexey Schebelev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-esbuild-starter 2 | Starter for new Svelte application with ESBuild bundler 3 | 4 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 5 | 6 | ```bash 7 | npx degit alexxnb/svelte-esbuild-starter svelte-app 8 | cd svelte-app 9 | ``` 10 | 11 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 12 | 13 | 14 | ## Get started 15 | 16 | Install the dependencies... 17 | 18 | ```bash 19 | cd svelte-app 20 | npm install 21 | ``` 22 | 23 | ...then start development server: 24 | 25 | ```bash 26 | npm run dev 27 | ``` 28 | 29 | 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. 30 | 31 | By default, the server will only respond to requests from localhost. 32 | 33 | 34 | ## Building and running in production mode 35 | 36 | To create an optimised version of the app: 37 | 38 | ```bash 39 | npm run build 40 | ``` 41 | 42 | You can run the newly built app with `npm run start`. This uses [derver](https://github.com/alexxnb/derver). -------------------------------------------------------------------------------- /esbuild.js: -------------------------------------------------------------------------------- 1 | const esbuild = require("esbuild"); 2 | const { derver } = require("derver"); 3 | const sveltePlugin = require("esbuild-svelte"); 4 | 5 | const DEV = process.argv.includes('--dev'); 6 | 7 | // Development server configuration. To configure production server 8 | // see `start` script in `package.json` file. 9 | 10 | const HOST = 'localhost'; 11 | const PORT = 5000; 12 | 13 | esbuild.build({ 14 | // esbuild configuration 15 | entryPoints: ['src/main.js'], 16 | bundle: true, 17 | outfile: 'public/build/bundle.js', 18 | mainFields: ['svelte','module','main'], 19 | minify: !DEV, 20 | incremental: DEV, 21 | sourcemap: DEV, // Use `DEV && 'inline'` to inline sourcemaps to the bundle 22 | plugins: [ 23 | sveltePlugin({ 24 | 25 | compileOptions:{ 26 | // Svelte compile options 27 | dev: DEV, 28 | css: false //use `css:true` to inline CSS in `bundle.js` 29 | }, 30 | 31 | preprocess:[ 32 | // Place here any Svelte preprocessors 33 | ] 34 | 35 | }) 36 | ] 37 | 38 | }).then(bundle => { 39 | DEV && derver({ 40 | dir: 'public', 41 | host: HOST, 42 | port: PORT, 43 | watch:['public','src'], 44 | onwatch: async (lr,item)=>{ 45 | if(item == 'src'){ 46 | lr.prevent(); 47 | bundle.rebuild().catch(err => lr.error(err.message,'Svelte compile error')); 48 | } 49 | } 50 | }) 51 | }); 52 | 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-esbuild-starter", 3 | "version": "0.0.1", 4 | "description": "Starter for new Svelte application with ESBuild bundler ", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node esbuild", 8 | "dev": "node esbuild --dev", 9 | "start": "npx derver --production --port=5000 public" 10 | }, 11 | "license": "MIT", 12 | "devDependencies": { 13 | "derver": "^0.5.3", 14 | "esbuild": "^0.14.19", 15 | "esbuild-svelte": "^0.6.2", 16 | "svelte": "^3.46.4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexxNB/svelte-esbuild-starter/fa544ab373e5156008ef70fa0cade8a0c8fefd6d/public/favicon.png -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | -webkit-padding: 0.4em 0; 36 | padding: 0.4em; 37 | margin: 0 0 0.5em 0; 38 | box-sizing: border-box; 39 | border: 1px solid #ccc; 40 | border-radius: 2px; 41 | } 42 | 43 | input:disabled { 44 | color: #ccc; 45 | } 46 | 47 | button { 48 | color: #333; 49 | background-color: #f4f4f4; 50 | outline: none; 51 | } 52 | 53 | button:disabled { 54 | color: #999; 55 | } 56 | 57 | button:not(:disabled):active { 58 | background-color: #ddd; 59 | } 60 | 61 | button:focus { 62 | border-color: #666; 63 | } 64 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Hello {name}!

7 |

Visit the Svelte tutorial to learn how to build Svelte apps.

8 |
9 | 10 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; --------------------------------------------------------------------------------