แก้ไข

แชร์ผ่าน

Install React on Windows Subsystem for Linux

This guide walks through setting up a React development environment on WSL (Windows Subsystem for Linux) using the Vite frontend tooling.

WSL is recommended if you plan to deploy to a Linux server, use Docker containers, or work with Bash-based tooling. If you are new to React and just want to get started quickly, consider installing React directly on Windows instead.

For background on React and the different scenarios — web apps, mobile apps (React Native), and native desktop apps (React Native for Desktop) — see the React overview.

Prerequisites

  • WSL 2: Install WSL with a Linux distribution (Ubuntu recommended) and confirm it is running in WSL 2 mode: wsl -l -v. Requires Windows 10 version 2004 or later, or Windows 11.
  • Node.js on WSL 2: Install Node.js inside your WSL distribution using nvm. Do not use the Windows-installed version of Node.js inside WSL.

Important

Store your project files inside the WSL filesystem (e.g., ~/projects), not on the mounted Windows drive (/mnt/c/). Working across the filesystem boundary significantly slows down install and build times.

Create your React app

  1. Open your WSL terminal (e.g., Ubuntu).

  2. Create a new project folder and enter it:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Create a new React app using Vite:

    npm create vite@latest my-react-app -- --template react

    Vite will scaffold a new React project in the my-react-app folder.

  4. Navigate into the new app folder and install dependencies:

    cd my-react-app
npm install

  5. Start the local development server:

    npm run dev

    Your app will be available at http://localhost:5173. Use Ctrl+C to stop the server.

  6. When you are ready to deploy, build a production bundle:

    npm run build

    Output is placed in the dist folder. See Deploying a Static Site for hosting options.

Note

Vite is ideal for single-page apps (SPAs). If you need server-side rendering or a Node.js backend, consider Next.js instead. For static site generation, see Gatsby.

Additional resources

  • Last updated on