From ffa96c96dfea49a261a8d88c6b1fb77133d38958 Mon Sep 17 00:00:00 2001 From: Pavol-Szegheo-MSc Date: Sun, 11 May 2025 01:50:25 -0400 Subject: [PATCH] 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. --- docusaurus/docs/getting-started.md | 84 ++++++++++++++++++++++++------ 1 file changed, 67 insertions(+), 17 deletions(-) diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index ef7da3006f0..8534775294d 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -3,40 +3,90 @@ id: getting-started title: Getting Started --- -Create React App is an officially supported way to create single-page React -applications. It offers a modern build setup with no configuration. +While Create React App is an officially supported way to create single-page React +applications, and it offers a satisfactory build setup with no configuration, it is now recommended to use Vite. ## Quick Start ```sh -npx create-react-app my-app +npm create vite@latest my-app -- --template react cd my-app -npm start -``` +npm install +npm run dev -> 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. +Then open [http://localhost:5173/](http://localhost:5173/) to brovse your app. -_([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))_ +When you’re ready to deploy to production: -Then open [http://localhost:3000/](http://localhost:3000/) to see your app. +Here's how you typically install dependencies, build the production version, and preview it locally: -When you’re ready to deploy to production, create a minified bundle with `npm run build`. +Install Dependencies: (You already did this, but it's the necessary first step if you were starting fresh or just cloned the repo). -

-npm start -

+```sh +npm install +``` +# or +```sh +yarn install +``` +# or +```sh +pnpm install +``` +Build the Production Version: +This command triggers Vite to bundle and optimize your application's code and assets for production deployment. + +```sh +npm run build +``` +# or +```sh +yarn build +``` +# or +```sh +pnpm run build +``` +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. +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. +Serve/Preview the Production Build Locally: +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. + +Vite provides a simple command to spin up a local static server specifically for testing your production build: + +```sh +npm run preview +``` +# or +```sh +yarn preview +``` +# or +```sh +pnpm run preview +``` +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. +Important: The npm run preview command is only for previewing the build locally. It is not designed for production use or handling high traffic. +Deploy to Production: +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. -### Get Started Immediately +Common production hosting options for Vite SPAs include: -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. +Static Hosting Services: Netlify, Vercel, Surge, GitHub Pages, GitLab Pages, Cloudflare Pages. These services are often zero-configuration for Vite apps. +Cloud Storage + CDN: AWS S3 + CloudFront, Azure Blob Storage + CDN, Google Cloud Storage + Cloud CDN. +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). +Azure Static Web Apps (specifically designed for hosting static sites like Vite apps). +In summary: -Create a project, and you’re good to go. +Use npm run build to create the optimized static files (in the dist folder). +Use npm run preview to serve those built files locally for testing purposes. +Deploy the contents of the dist folder to a dedicated static hosting service or web server for production. -## Creating an App +## Creating an App in a less efficient way, without using Vite **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. -To create a new app, you may choose one of the following methods: +To create a new app, in a less efficient way, without using Vite, you may choose one of the following methods: ### npx