|
| 1 | +*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.* |
| 2 | + |
| 3 | +*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)* |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +# svelte app |
| 8 | + |
| 9 | +This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. |
| 10 | + |
| 11 | +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): |
| 12 | + |
| 13 | +```bash |
| 14 | +npx degit sveltejs/template svelte-app |
| 15 | +cd svelte-app |
| 16 | +``` |
| 17 | + |
| 18 | +*Note that you will need to have [Node.js](https://nodejs.org) installed.* |
| 19 | + |
| 20 | + |
| 21 | +## Get started |
| 22 | + |
| 23 | +Install the dependencies... |
| 24 | + |
| 25 | +```bash |
| 26 | +cd svelte-app |
| 27 | +npm install |
| 28 | +``` |
| 29 | + |
| 30 | +...then start [Rollup](https://rollupjs.org): |
| 31 | + |
| 32 | +```bash |
| 33 | +npm run dev |
| 34 | +``` |
| 35 | + |
| 36 | +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. |
| 37 | + |
| 38 | +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`. |
| 39 | + |
| 40 | +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. |
| 41 | + |
| 42 | +## Building and running in production mode |
| 43 | + |
| 44 | +To create an optimised version of the app: |
| 45 | + |
| 46 | +```bash |
| 47 | +npm run build |
| 48 | +``` |
| 49 | + |
| 50 | +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). |
| 51 | + |
| 52 | + |
| 53 | +## Single-page app mode |
| 54 | + |
| 55 | +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. |
| 56 | + |
| 57 | +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: |
| 58 | + |
| 59 | +```js |
| 60 | +"start": "sirv public --single" |
| 61 | +``` |
| 62 | + |
| 63 | +## Using TypeScript |
| 64 | + |
| 65 | +This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: |
| 66 | + |
| 67 | +```bash |
| 68 | +node scripts/setupTypeScript.js |
| 69 | +``` |
| 70 | + |
| 71 | +Or remove the script via: |
| 72 | + |
| 73 | +```bash |
| 74 | +rm scripts/setupTypeScript.js |
| 75 | +``` |
| 76 | + |
| 77 | +If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte). |
| 78 | + |
| 79 | +## Deploying to the web |
| 80 | + |
| 81 | +### With [Vercel](https://vercel.com) |
| 82 | + |
| 83 | +Install `vercel` if you haven't already: |
| 84 | + |
| 85 | +```bash |
| 86 | +npm install -g vercel |
| 87 | +``` |
| 88 | + |
| 89 | +Then, from within your project folder: |
| 90 | + |
| 91 | +```bash |
| 92 | +cd public |
| 93 | +vercel deploy --name my-project |
| 94 | +``` |
| 95 | + |
| 96 | +### With [surge](https://surge.sh/) |
| 97 | + |
| 98 | +Install `surge` if you haven't already: |
| 99 | + |
| 100 | +```bash |
| 101 | +npm install -g surge |
| 102 | +``` |
| 103 | + |
| 104 | +Then, from within your project folder: |
| 105 | + |
| 106 | +```bash |
| 107 | +npm run build |
| 108 | +surge public my-project.surge.sh |
| 109 | +``` |
0 commit comments