Skip to content

Commit ffa96c9

Browse files
Update getting-started.md
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.
1 parent 6254386 commit ffa96c9

File tree

1 file changed

+67
-17
lines changed

1 file changed

+67
-17
lines changed

docusaurus/docs/getting-started.md

Lines changed: 67 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,90 @@ id: getting-started
33
title: Getting Started
44
---
55

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

99
## Quick Start
1010

1111
```sh
12-
npx create-react-app my-app
12+
npm create vite@latest my-app -- --template react
1313
cd my-app
14-
npm start
15-
```
14+
npm install
15+
npm run dev
1616

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

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

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:
2222
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).
2424

25-
<p align='center'>
26-
<img src='https://cdn.jsdelivr.net/gh/facebook/create-react-app@27b42ac7efa018f2541153ab30d63180f5fa39e0/screencast.svg' width='600' alt='npm start' />
27-
</p>
25+
```sh
26+
npm install
27+
```
28+
# or
29+
```sh
30+
yarn install
31+
```
32+
# or
33+
```sh
34+
pnpm install
35+
```
36+
Build the Production Version:
37+
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.
2872
29-
### Get Started Immediately
73+
Common production hosting options for Vite SPAs include:
3074
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.
76+
Cloud Storage + CDN: AWS S3 + CloudFront, Azure Blob Storage + CDN, Google Cloud Storage + Cloud CDN.
77+
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:
3280
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.
3484
35-
## Creating an App
85+
## Creating an App in a less efficient way, without using Vite
3686
3787
**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.
3888
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:
4090
4191
### npx
4292

0 commit comments

Comments
 (0)