|
1 |
| -*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* |
| 1 | +# create-svelte |
2 | 2 |
|
3 |
| ---- |
| 3 | +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte); |
4 | 4 |
|
5 |
| -# svelte app |
| 5 | +## Creating a project |
6 | 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): |
| 7 | +If you're seeing this, you've probably already done this step. Congrats! |
10 | 8 |
|
11 | 9 | ```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... |
| 10 | +# create a new project in the current directory |
| 11 | +npm init svelte@next |
22 | 12 |
|
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 |
| 13 | +# create a new project in my-app |
| 14 | +npm init svelte@next my-app |
32 | 15 | ```
|
33 | 16 |
|
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`. |
| 17 | +> Note: the `@next` is temporary |
37 | 18 |
|
38 |
| -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. |
39 | 19 |
|
40 |
| -## Building and running in production mode |
| 20 | +## Developing |
41 | 21 |
|
42 |
| -To create an optimised version of the app: |
| 22 | +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
43 | 23 |
|
44 | 24 | ```bash
|
45 |
| -npm run build |
46 |
| -``` |
47 |
| - |
48 |
| -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). |
49 |
| - |
50 |
| - |
51 |
| -## Single-page app mode |
52 |
| - |
53 |
| -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. |
54 |
| - |
55 |
| -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: |
56 |
| - |
57 |
| -```js |
58 |
| -"start": "sirv public --single" |
59 |
| -``` |
60 |
| - |
61 |
| -## Using TypeScript |
62 |
| - |
63 |
| -This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: |
64 |
| - |
65 |
| -```bash |
66 |
| -node scripts/setupTypeScript.js |
67 |
| -``` |
68 |
| - |
69 |
| -Or remove the script via: |
70 |
| - |
71 |
| -```bash |
72 |
| -rm scripts/setupTypeScript.js |
73 |
| -``` |
74 |
| - |
75 |
| -## Deploying to the web |
76 |
| - |
77 |
| -### With [Vercel](https://vercel.com) |
78 |
| - |
79 |
| -Install `vercel` if you haven't already: |
80 |
| - |
81 |
| -```bash |
82 |
| -npm install -g vercel |
83 |
| -``` |
84 |
| - |
85 |
| -Then, from within your project folder: |
| 25 | +npm run dev |
86 | 26 |
|
87 |
| -```bash |
88 |
| -cd public |
89 |
| -vercel deploy --name my-project |
| 27 | +# or start the server and open the app in a new browser tab |
| 28 | +npm run dev -- --open |
90 | 29 | ```
|
91 | 30 |
|
92 |
| -### With [surge](https://surge.sh/) |
93 | 31 |
|
94 |
| -Install `surge` if you haven't already: |
| 32 | +## Building |
95 | 33 |
|
96 |
| -```bash |
97 |
| -npm install -g surge |
98 |
| -``` |
| 34 | +Svelte apps are built with *adapters*, which optimise your project for deployment to different environments, like [Begin](https://begin.com), [Netlify](https://www.netlify.com), [Vercel](https://vercel.com) and so on. (You can also create your own adapter — instructions TODO.) |
99 | 35 |
|
100 |
| -Then, from within your project folder: |
| 36 | +By default, `npm run build` will generate a Node app that you can run with `node build`. To use a different adapter, install it and update your `svelte.config.js` accordingly. The following official adapters are available: |
101 | 37 |
|
102 |
| -```bash |
103 |
| -npm run build |
104 |
| -surge public my-project.surge.sh |
105 |
| -``` |
| 38 | +* [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) |
| 39 | +* [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) |
| 40 | +* [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify) |
| 41 | +* ...more soon |
0 commit comments