├── .gitignore
├── .prettierrc
├── README.md
├── package.json
├── postcss.config.js
├── public
├── favicon.png
├── global.css
├── index.css
├── index.html
└── tailwind.css
├── rollup.config.js
├── scripts
└── setupTypeScript.js
├── src
├── App.svelte
├── components
│ └── Toggle.svelte
└── main.js
├── svelte.config.js
├── tailwind.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 |
4 | .DS_Store
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "tabWidth": 2,
4 | "arrowParens": "always",
5 | "bracketSpacing": true,
6 | "endOfLine": "lf",
7 | "printWidth": 80,
8 | "singleQuote": false,
9 | "svelteSortOrder": "scripts-styles-markup",
10 | "svelteStrictMode": true,
11 | "svelteBracketNewLine": false,
12 | "svelteAllowShorthand": false
13 | }
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte Tailwind starter app
2 |
3 | This is a project template for [Svelte](https://svelte.dev) apps with [Tailwind](https://tailwindcss.com). It lives at https://github.com/lohanidamodar/svelte-tailwind-starter.
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 lohanidamodar/svelte-tailwind-starter svelte-tailwind-app
9 | cd svelte-tailwind-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-tailwind-app
21 | npm install
22 | ```
23 |
24 | ...then start [Rollup](https://rollupjs.org):
25 |
26 | ```bash
27 | npm run dev
28 | ```
29 |
30 | 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.
31 |
32 | 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`.
33 |
34 | If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
35 |
36 | ## Building and running in production mode
37 |
38 | To create an optimised version of the app:
39 |
40 | ```bash
41 | npm run build
42 | ```
43 |
44 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
45 |
46 |
47 | ## Single-page app mode
48 |
49 | 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.
50 |
51 | 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:
52 |
53 | ```js
54 | "start": "sirv public --single"
55 | ```
56 |
57 | ## Using TypeScript
58 |
59 | This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
60 |
61 | ```bash
62 | node scripts/setupTypeScript.js
63 | ```
64 |
65 | Or remove the script via:
66 |
67 | ```bash
68 | rm scripts/setupTypeScript.js
69 | ```
70 |
71 | ## Deploying to the web
72 |
73 | ### With [Vercel](https://vercel.com)
74 |
75 | Install `vercel` if you haven't already:
76 |
77 | ```bash
78 | npm install -g vercel
79 | ```
80 |
81 | Then, from within your project folder:
82 |
83 | ```bash
84 | cd public
85 | vercel deploy --name my-project
86 | ```
87 |
88 | ### With [surge](https://surge.sh/)
89 |
90 | Install `surge` if you haven't already:
91 |
92 | ```bash
93 | npm install -g surge
94 | ```
95 |
96 | Then, from within your project folder:
97 |
98 | ```bash
99 | npm run build
100 | surge public my-project.surge.sh
101 | ```
102 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-app",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
6 | "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
7 | "build": "npm run build:tailwind && rollup -c",
8 | "dev": "run-p start:dev autobuild watch:tailwind",
9 | "start": "sirv public",
10 | "start:dev": "sirv public --dev",
11 | "autobuild": "rollup -c -w"
12 | },
13 | "devDependencies": {
14 | "@fullhuman/postcss-purgecss": "^3.0.0",
15 | "@rollup/plugin-commonjs": "^14.0.0",
16 | "@rollup/plugin-node-resolve": "^8.0.0",
17 | "autoprefixer": "^10.0.2",
18 | "npm-run-all": "^4.1.5",
19 | "postcss": "^8.1.10",
20 | "postcss-cli": "^8.2.0",
21 | "rollup": "^2.3.4",
22 | "rollup-plugin-livereload": "^2.0.0",
23 | "rollup-plugin-svelte": "^6.0.0",
24 | "rollup-plugin-terser": "^7.0.0",
25 | "svelte": "^3.0.0",
26 | "svelte-preprocess": "^4.6.1",
27 | "tailwindcss": "^2.0.1"
28 | },
29 | "dependencies": {
30 | "sirv-cli": "^1.0.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const tailwindcss = require("tailwindcss");
2 |
3 | // only needed if you want to purge
4 | const purgecss = require("@fullhuman/postcss-purgecss")({
5 | content: ["./src/**/*.svelte", "./public/**/*.html"],
6 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
7 | });
8 |
9 | module.exports = {
10 | plugins: [
11 | // require('postcss-import'),
12 | tailwindcss("./tailwind.js"),
13 | require("autoprefixer"),
14 | // only needed if you want to purge
15 | ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
16 | ]
17 | };
18 |
19 |
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lohanidamodar/svelte-tailwind-starter/9a6e78bc696b4cf5648c3ecfd64798d9b4b53430/public/favicon.png
--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lohanidamodar/svelte-tailwind-starter/9a6e78bc696b4cf5648c3ecfd64798d9b4b53430/public/global.css
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Svelte app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/public/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import resolve from '@rollup/plugin-node-resolve';
3 | import commonjs from '@rollup/plugin-commonjs';
4 | import livereload from 'rollup-plugin-livereload';
5 | import { terser } from 'rollup-plugin-terser';
6 | import sveltePreprocess from 'svelte-preprocess';
7 |
8 | const production = !process.env.ROLLUP_WATCH;
9 |
10 | function serve() {
11 | let server;
12 |
13 | function toExit() {
14 | if (server) server.kill(0);
15 | }
16 |
17 | return {
18 | writeBundle() {
19 | if (server) return;
20 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
21 | stdio: ['ignore', 'inherit', 'inherit'],
22 | shell: true
23 | });
24 |
25 | process.on('SIGTERM', toExit);
26 | process.on('exit', toExit);
27 | }
28 | };
29 | }
30 |
31 | export default {
32 | input: 'src/main.js',
33 | output: {
34 | sourcemap: true,
35 | format: 'iife',
36 | name: 'app',
37 | file: 'public/build/bundle.js'
38 | },
39 | plugins: [
40 | svelte({
41 | // enable run-time checks when not in production
42 | dev: !production,
43 | // we'll extract any component CSS out into
44 | // a separate file - better for performance
45 | css: css => {
46 | css.write('bundle.css');
47 | },
48 | preprocess: [
49 | sveltePreprocess({
50 | postcss: {}
51 | }),
52 | ]
53 | }),
54 |
55 | // If you have external dependencies installed from
56 | // npm, you'll most likely need these plugins. In
57 | // some cases you'll need additional configuration -
58 | // consult the documentation for details:
59 | // https://github.com/rollup/plugins/tree/master/packages/commonjs
60 | resolve({
61 | browser: true,
62 | dedupe: ['svelte']
63 | }),
64 | commonjs(),
65 |
66 | // In dev mode, call `npm run start` once
67 | // the bundle has been generated
68 | !production && serve(),
69 |
70 | // Watch the `public` directory and refresh the
71 | // browser on changes when not in production
72 | !production && livereload('public'),
73 |
74 | // If we're building for production (npm run build
75 | // instead of npm run dev), minify
76 | production && terser()
77 | ],
78 | watch: {
79 | clearScreen: false
80 | }
81 | };
82 |
--------------------------------------------------------------------------------
/scripts/setupTypeScript.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /** This script modifies the project to support TS code in .svelte files like:
4 |
5 |
8 |
9 | As well as validating the code for CI.
10 | */
11 |
12 | /** To work on this script:
13 | rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
14 | */
15 |
16 | const fs = require("fs")
17 | const path = require("path")
18 | const { argv } = require("process")
19 |
20 | const projectRoot = argv[2] || path.join(__dirname, "..")
21 |
22 | // Add deps to pkg.json
23 | const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
24 | packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
25 | "svelte-check": "^1.0.0",
26 | "svelte-preprocess": "^4.0.0",
27 | "@rollup/plugin-typescript": "^6.0.0",
28 | "typescript": "^3.9.3",
29 | "tslib": "^2.0.0",
30 | "@tsconfig/svelte": "^1.0.0"
31 | })
32 |
33 | // Add script for checking
34 | packageJSON.scripts = Object.assign(packageJSON.scripts, {
35 | "validate": "svelte-check"
36 | })
37 |
38 | // Write the package JSON
39 | fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
40 |
41 | // mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
42 | const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
43 | const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
44 | fs.renameSync(beforeMainJSPath, afterMainTSPath)
45 |
46 | // Switch the app.svelte file to use TS
47 | const appSveltePath = path.join(projectRoot, "src", "App.svelte")
48 | let appFile = fs.readFileSync(appSveltePath, "utf8")
49 | appFile = appFile.replace("
5 |
6 |
14 |
15 |
16 |
17 |
18 |
Hello World!
19 |
Welcome to Svelte-Tailwind starter.
20 |
28 |
29 |
30 |
23 |
24 |
25 |
45 |
46 |