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
Added the currently most efficient method to create a new react app, using Vite. Also included the production related information for Vite. Modified the headings for other methods to reflect that they are less desirable. Deleted some unnecessary details related to Create React App from the prefered Vite section.
Copy file name to clipboardExpand all lines: docusaurus/docs/getting-started.md
+67-17Lines changed: 67 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -3,40 +3,90 @@ id: getting-started
3
3
title: Getting Started
4
4
---
5
5
6
-
Create React App is an officially supported way to create single-page React
7
-
applications. It offers a modern build setup with no configuration.
6
+
While Create React App is an officially supported way to create single-page React
7
+
applications, and it offers a satisfactory build setup with no configuration, it is now recommended to use Vite.
8
8
9
9
## Quick Start
10
10
11
11
```sh
12
-
npx create-react-app my-app
12
+
npm create vite@latest my-app -- --template react
13
13
cd my-app
14
-
npm start
15
-
```
14
+
npm install
15
+
npm run dev
16
16
17
-
> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app`to ensure that `npx` always uses the latest version.
17
+
Then open [http://localhost:5173/](http://localhost:5173/) to brovse your app.
18
18
19
-
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
19
+
When you’re ready to deploy to production:
20
20
21
-
Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
21
+
Here's how you typically install dependencies, build the production version, and preview it locally:
22
22
23
-
When you’re ready to deploy to production, create a minified bundle with `npm run build`.
23
+
Install Dependencies: (You already did this, but it's the necessary first step if you were starting fresh or just cloned the repo).
This command triggers Vite to bundle and optimize your application's code and assets for production deployment.
38
+
39
+
```sh
40
+
npm run build
41
+
```
42
+
# or
43
+
```sh
44
+
yarn build
45
+
```
46
+
# or
47
+
```sh
48
+
pnpm run build
49
+
```
50
+
What this does: Vite uses Rollup under the hood to bundle your code into highly optimized static files (HTML, CSS, JavaScript, assets). It performs minification, tree-shaking (removing unused code), and other optimizations to ensure the smallest possible file sizes and fastest loading times.
51
+
Output: By default, the generated production files will be placed in a dist (or build) directory in the root of your project. This dist folder contains everything you need to deploy your application.
52
+
Serve/Preview the Production Build Locally:
53
+
You generally cannot just open the index.html file inside the dist folder directly in your browser. This is because modern Single Page Applications (SPAs) rely on a web server to handle routing and correctly serve the index.html file for various URLs.
54
+
55
+
Vite provides a simple command to spin up a local static server specifically for testing your production build:
56
+
57
+
```sh
58
+
npm run preview
59
+
```
60
+
# or
61
+
```sh
62
+
yarn preview
63
+
```
64
+
# or
65
+
```sh
66
+
pnpm run preview
67
+
```
68
+
What this does: This command starts a minimal HTTP server that serves the static files directly from your dist directory. This allows you to test the built version of your app locally before deploying it.
69
+
Important: The npm run preview command is only for previewing the build locally. It is not designed for production use or handling high traffic.
70
+
Deploy to Production:
71
+
For actual production deployment, you need a static file hosting service or a web server configured to serve static files. You would take the entire contents of the dist folder and upload them to your hosting provider.
28
72
29
-
### Get Started Immediately
73
+
Common production hosting options for Vite SPAs include:
30
74
31
-
You **don’t** need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
75
+
Static Hosting Services: Netlify, Vercel, Surge, GitHub Pages, GitLab Pages, Cloudflare Pages. These services are often zero-configuration for Vite apps.
Traditional Web Servers: Nginx, Apache, Caddy (configured to serve static files from the dist folder and often with a fallback to index.html for client-side routing).
78
+
Azure Static Web Apps (specifically designed for hosting static sites like Vite apps).
79
+
In summary:
32
80
33
-
Create a project, and you’re good to go.
81
+
Use npm run build to create the optimized static files (in the dist folder).
82
+
Use npm run preview to serve those built files locally for testing purposes.
83
+
Deploy the contents of the dist folder to a dedicated static hosting service or web server for production.
34
84
35
-
## Creating an App
85
+
## Creating an App in a less efficient way, without using Vite
36
86
37
87
**You’ll need to have Node >= 14 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
38
88
39
-
To create a new app, you may choose one of the following methods:
89
+
To create a new app, in a less efficient way, without using Vite, you may choose one of the following methods:
0 commit comments