|
| 1 | +*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* |
| 2 | + |
| 3 | +--- |
| 4 | + |
| 5 | +# svelte app |
| 6 | + |
| 7 | +This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. |
| 8 | + |
| 9 | +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): |
| 10 | + |
| 11 | +```bash |
| 12 | +npx degit sveltejs/template svelte-app |
| 13 | +cd svelte-app |
| 14 | +``` |
| 15 | + |
| 16 | +*Note that you will need to have [Node.js](https://nodejs.org) installed.* |
| 17 | + |
| 18 | + |
| 19 | +## Get started |
| 20 | + |
| 21 | +Install the dependencies... |
| 22 | + |
| 23 | +```bash |
| 24 | +cd svelte-app |
| 25 | +npm install |
| 26 | +``` |
| 27 | + |
| 28 | +...then start [Rollup](https://rollupjs.org): |
| 29 | + |
| 30 | +```bash |
| 31 | +npm run dev |
| 32 | +``` |
| 33 | + |
| 34 | +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. |
| 35 | + |
| 36 | +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`. |
| 37 | + |
| 38 | + |
| 39 | +## Building and running in production mode |
| 40 | + |
| 41 | +To create an optimised version of the app: |
| 42 | + |
| 43 | +```bash |
| 44 | +npm run build |
| 45 | +``` |
| 46 | + |
| 47 | +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). |
| 48 | + |
| 49 | + |
| 50 | +## Single-page app mode |
| 51 | + |
| 52 | +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. |
| 53 | + |
| 54 | +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: |
| 55 | + |
| 56 | +```js |
| 57 | +"start": "sirv public --single" |
| 58 | +``` |
| 59 | + |
| 60 | + |
| 61 | +## Deploying to the web |
| 62 | + |
| 63 | +### With [now](https://zeit.co/now) |
| 64 | + |
| 65 | +Install `now` if you haven't already: |
| 66 | + |
| 67 | +```bash |
| 68 | +npm install -g now |
| 69 | +``` |
| 70 | + |
| 71 | +Then, from within your project folder: |
| 72 | + |
| 73 | +```bash |
| 74 | +cd public |
| 75 | +now deploy --name my-project |
| 76 | +``` |
| 77 | + |
| 78 | +As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. |
| 79 | + |
| 80 | +### With [surge](https://surge.sh/) |
| 81 | + |
| 82 | +Install `surge` if you haven't already: |
| 83 | + |
| 84 | +```bash |
| 85 | +npm install -g surge |
| 86 | +``` |
| 87 | + |
| 88 | +Then, from within your project folder: |
| 89 | + |
| 90 | +```bash |
| 91 | +npm run build |
| 92 | +surge public my-project.surge.sh |
| 93 | +``` |
0 commit comments