Skip to content

Commit 7630a25

Browse files
Rich-HarrisdummdidummConduitrygtm-nayan
authored
[docs] update getting started info (#7573)
* update getting started info * Update site/content/blog/2019-04-16-svelte-for-new-developers.md Co-authored-by: Conduitry <[email protected]> * Update site/content/tutorial/01-introduction/07-making-an-app/text.md Co-authored-by: gtmnayan <[email protected]> * Update site/content/blog/2019-04-16-svelte-for-new-developers.md Co-authored-by: Simon H <[email protected]> Co-authored-by: Conduitry <[email protected]> Co-authored-by: gtmnayan <[email protected]>
1 parent 9dc308a commit 7630a25

File tree

2 files changed

+19
-24
lines changed

2 files changed

+19
-24
lines changed

site/content/blog/2019-04-16-svelte-for-new-developers.md

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -56,52 +56,45 @@ To write code, you need a good editor. The most popular choice is [Visual Studio
5656

5757
## Creating a project
5858

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.
6260

6361
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):
6462

6563
```bash
66-
npx degit sveltejs/template my-svelte-project
64+
npm init vite my-svelte-project -- --template svelte
6765
cd my-svelte-project
6866
npm install
6967
```
7068

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`.
7272

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:
7474

7575
```bash
7676
npm run dev
7777
```
7878

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.
8080

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.
8282

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.
8484

8585

8686
## Building your app
8787

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.
8989

9090
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:
9191

9292
```bash
9393
npm run build
9494
```
9595

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:
9797

9898
```bash
99-
npm run start
99+
npm run preview
100100
```
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.

site/content/tutorial/01-introduction/07-making-an-app/text.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ title: Making an app
44

55
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.
66

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/)...
88

9-
* [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte)
10-
* [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte)
11-
* [svelte-loader](https://github.com/sveltejs/svelte-loader)
9+
```bash
10+
npm init vite my-app -- --template svelte
11+
```
12+
13+
...or one of the [community-maintained integrations](https://sveltesociety.dev/tools).
1214

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.
1416
1517
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.
1618

0 commit comments

Comments
 (0)