You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: site/content/blog/2019-04-16-svelte-for-new-developers.md
+12-19Lines changed: 12 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -56,52 +56,45 @@ To write code, you need a good editor. The most popular choice is [Visual Studio
56
56
57
57
## Creating a project
58
58
59
-
We're going to follow the instructions in part two of [The easiest way to get started with Svelte](/blog/the-easiest-way-to-get-started).
60
-
61
-
First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work. You will need to have [Git](https://git-scm.com/) installed in order to use degit. (Eventually you'll probably have to learn [Git](https://git-scm.com/) itself, which most programmers use to manage their projects.)
59
+
We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work.
62
60
63
61
On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
64
62
65
63
```bash
66
-
npx degit sveltejs/template my-svelte-project
64
+
npm init vite my-svelte-project -- --template svelte
67
65
cd my-svelte-project
68
66
npm install
69
67
```
70
68
71
-
This creates a new directory, `my-svelte-project`, adds files from the [sveltejs/template](https://github.com/sveltejs/template) code repository, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
69
+
> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript.
70
+
71
+
This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
72
72
73
-
In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `start`. To launch your app in development mode, type the following:
73
+
In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `preview`. To launch your app in development mode, type the following:
74
74
75
75
```bash
76
76
npm run dev
77
77
```
78
78
79
-
Running the `dev` script starts a program called [Rollup](https://rollupjs.org/guide/en/). Rollup's job is to take your application's source files (so far, just `src/main.js` and `src/App.svelte`), pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
79
+
Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
80
80
81
-
Speaking of which, open a browser and navigate to http://localhost:8080. This is your application running on a local *web server* (hence 'localhost') on port 8080.
81
+
Speaking of which, open a browser and navigate to http://localhost:3000. This is your application running on a local *web server* (hence 'localhost') on port 3000.
82
82
83
-
Try changing `src/App.svelte` and saving it. The application will reload with your changes.
83
+
Try changing `src/App.svelte` and saving it. The application will update with your changes.
84
84
85
85
86
86
## Building your app
87
87
88
-
In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Rollup skips the final step where your app's JavaScript is compressed using [Terser](https://terser.org/).
88
+
In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed.
89
89
90
90
When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command:
91
91
92
92
```bash
93
93
npm run build
94
94
```
95
95
96
-
Your `public` directory now contains a compressed `bundle.js` file containing your app's JavaScript. You can run it like so:
96
+
Your `dist` directory now contains an optimised version of your app. You can run it like so:
97
97
98
98
```bash
99
-
npm run start
99
+
npm run preview
100
100
```
101
-
102
-
This will run the app on http://localhost:8080.
103
-
104
-
105
-
## Next steps
106
-
107
-
To share your app with the world you'll need to *deploy* it. There are many ways to do so — some are listed in the `README.md` file inside your project.
Copy file name to clipboardExpand all lines: site/content/tutorial/01-introduction/07-making-an-app/text.md
+7-5Lines changed: 7 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,15 @@ title: Making an app
4
4
5
5
This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor.
6
6
7
-
First, you'll need to integrate Svelte with a build tool. There are officially maintained plugins for [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org) and [webpack](https://webpack.js.org/)...
7
+
First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)...
...or one of the [community-maintained integrations](https://sveltesociety.dev/tools).
12
14
13
-
...and a variety of [community-maintained ones](https://sveltesociety.dev/tools).
15
+
> [SvelteKit](https://kit.svelte.dev) is the official application framework from the Svelte team. It's currently in development, but if you don't mind using pre-1.0 software then it's the recommended way to build Svelte apps.
14
16
15
17
Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
0 commit comments