How to Install React.js on a Windows VPS: Complete Setup Guide

React.js is an open-source JavaScript library maintained by Meta (formerly Facebook) for building component-based user interfaces, particularly single-page applications (SPAs) that update the DOM dynamically without full page reloads. Installing React on a Windows VPS — rather than a local workstation — gives you a persistent, remotely accessible development environment with dedicated resources, making it ideal for team collaboration, CI/CD pipelines, and staging deployments.

This guide walks through every step of a production-grade React.js installation on a Windows VPS: from Node.js runtime configuration and environment variable management to project scaffolding, development server operation, and production build output. It also covers non-obvious failure modes that trip up engineers who follow surface-level tutorials.

Why Install React on a Windows VPS Instead of Localhost

Running your React development environment on a VPS Hosting instance rather than a local machine solves several real-world problems:

• Persistent uptime: The dev server stays running even when your local machine is off, allowing remote team members or QA testers to access a live preview URL at any time.
• Consistent environment: Every developer connects to the same OS, Node version, and dependency tree, eliminating "works on my machine" bugs.
• Resource isolation: CPU-intensive builds (npm run build, large Webpack compilations) do not degrade your local workstation.
• Staging parity: A Windows VPS mirrors the target deployment environment when your production stack is also Windows Server-based (IIS, ASP.NET hybrid architectures).
• Remote accessibility: You can expose the dev server on a specific port and access it from any browser, anywhere.

If your workload eventually scales to serving compiled React assets alongside a Node.js API, consider moving to a Dedicated Servers environment for guaranteed I/O throughput and no noisy-neighbor effects.

Prerequisites

Before starting, confirm the following are in place on your Windows VPS:

• Windows Server 2016 / 2019 / 2022 or Windows 10/11 (64-bit)
• Administrator or elevated user access via RDP
• Outbound internet access on the VPS (to download installers and npm packages)
• At least 2 GB RAM — Webpack's in-memory compilation is memory-hungry; 4 GB is recommended for projects with more than a handful of dependencies
• A text editor or IDE — Visual Studio Code is the de facto standard for React development

Step 1: Install Node.js on Windows

1.1 Download the LTS Release

React does not require the absolute latest Node.js release. The LTS (Long Term Support) channel is the correct choice for any environment where stability matters.

1. Open a browser on your VPS (or download remotely and transfer via RDP clipboard).
2. Navigate to https://nodejs.org.
3. Download the Windows Installer (.msi) for the current LTS version (e.g., 20.x or 22.x).

Critical note: Always download the 64-bit .msi installer, not the .zip archive. The .msi handles PATH registration, service integration, and the Visual C++ Redistributable dependency automatically. The .zip archive requires manual PATH configuration and is a common source of npm not being recognized errors.

1.2 Run the Installer

Execute the downloaded .msi file and follow the wizard:

1. Accept the license agreement.
2. Leave the destination path as the default (C:Program Filesnodejs) unless you have a specific reason to change it.
3. On the Custom Setup screen, ensure all of the following components are checked:

• Node.js runtime
• npm package manager
• Add to PATH (this is the most important checkbox — if unchecked, no terminal will recognize node or npm)
• Online documentation shortcuts (optional)

1. On the Tools for Native Modules screen, check "Automatically install the necessary tools" if you anticipate using any npm packages that require native compilation (node-gyp, bcrypt, sharp, etc.). This installs Chocolatey, Python, and the Visual Studio Build Tools silently.
2. Complete the installation and reboot the terminal session (or the entire RDP session if PATH changes are not reflected immediately).

1.3 Verify the Installation

Open a new PowerShell or Command Prompt window (not one that was open before the install — it will not have the updated PATH) and run:

node -v

npm -v

Both commands must return version strings. If either returns 'node' is not recognized as an internal or external command, the PATH was not set correctly. See the troubleshooting section below.

Expected output example:

v20.14.0
10.7.0

1.4 Configure npm's Global Package Directory (Optional but Recommended)

By default, npm installs global packages into C:Users<username>AppDataRoamingnpm. On a shared or multi-user Windows Server environment, this can cause permission conflicts. To set a custom global directory:

npm config set prefix "C:npm-global"

Then add C:npm-global to your system PATH via System Properties > Environment Variables > System Variables > Path.

Step 2: Scaffold a React Application

2.1 The Modern Approach: Vite (Recommended Over Create React App)

The original article recommends create-react-app (CRA). This is outdated advice. CRA was officially deprecated in early 2023 and is no longer maintained by the React core team. The React documentation itself no longer recommends it for new projects.

The current recommended scaffolding tools are:

For a straightforward SPA on a Windows VPS, Vite is the correct choice in 2024 and beyond.

2.2 Create a New React Project with Vite

Open PowerShell and navigate to your projects directory:

cd C:Projects

Scaffold a new React project:

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

To use TypeScript (strongly recommended for any non-trivial project):

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

Navigate into the project directory and install dependencies:

cd my-react-app
npm install

2.3 If You Must Use Create React App (Legacy Projects)

If you are maintaining a legacy codebase that requires CRA, use npx to run it without a global install:

npx create-react-app my-react-app

Do not run npm install -g create-react-app. The global install approach is deprecated and will pull an outdated cached version. Using npx always fetches the latest available version from the registry.

Step 3: Run the Development Server

3.1 Start the Dev Server

For a Vite-based project:

npm run dev

For a CRA-based project:

npm start

Both commands start a local development server. Vite defaults to http://localhost:5173; CRA defaults to http://localhost:3000.

3.2 Expose the Dev Server on a Windows VPS (Remote Access)

On a local machine, the dev server is only accessible from localhost. On a VPS, you typically want to access it from your local browser over the internet. Two changes are required:

Bind the server to all network interfaces:

For Vite, edit vite.config.js (or vite.config.ts):

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
  },
})

For CRA, set the HOST environment variable before starting:

set HOST=0.0.0.0
npm start

Open the port in Windows Firewall:

netsh advfirewall firewall add rule name="React Dev Server" dir=in action=allow protocol=TCP localport=5173

After this, you can access the dev server at http://<your-vps-ip>:5173 from any browser.

Security warning: Never expose a development server to the public internet on a production VPS without authentication. Use a reverse proxy (Nginx or IIS with URL Rewrite) or a VPN tunnel for any environment handling real data.

Step 4: Project Structure and Key Files

Understanding the scaffolded structure prevents confusion when you start modifying files:

my-react-app/
├── public/             # Static assets served as-is (favicon, robots.txt)
├── src/
│   ├── assets/         # Images, fonts imported by components
│   ├── App.jsx         # Root component
│   ├── App.css         # Root component styles
│   ├── main.jsx        # Entry point — mounts <App /> into index.html
│   └── index.css       # Global styles
├── index.html          # HTML shell — Vite injects the bundle here
├── vite.config.js      # Vite configuration
├── package.json        # Dependencies and scripts
└── node_modules/       # Installed packages (never commit this)

The src/main.jsx file is the application entry point. It calls ReactDOM.createRoot() to mount the root component into the #root div in index.html. Every component you build will ultimately be imported into this tree.

Step 5: Build for Production

When the application is ready for deployment, generate an optimized static build:

npm run build

This command invokes Vite's Rollup-based bundler (or Webpack for CRA), which:

• Transpiles JSX and modern JavaScript to browser-compatible ES5/ES2015+
• Tree-shakes unused code from the bundle
• Minifies JavaScript, CSS, and HTML
• Generates content-hashed filenames for long-term browser caching
• Outputs everything to the dist/ directory (Vite) or build/ directory (CRA)

To preview the production build locally before deploying:

npm run preview

The contents of dist/ are purely static files (HTML, JS, CSS, assets). They can be served by any web server — IIS on Windows Server, Nginx, Apache, or a static hosting service.

Deploying the Build to IIS on Windows Server

If your VPS runs IIS, configure a new site pointing to the dist/ folder. Because React SPAs use client-side routing, you must add a URL Rewrite rule to redirect all 404s back to index.html:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React SPA" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Without this rule, any direct navigation to a route like /dashboard will return a 404 from IIS instead of loading the React app.

If you are serving the React frontend alongside a backend API and need a managed control panel environment, a VPS with cPanel can simplify virtual host configuration and SSL termination.

Step 6: Secure the Application with HTTPS

A production React app must be served over HTTPS. Browsers block mixed-content requests, and many browser APIs (service workers, geolocation, clipboard) are restricted to secure contexts.

For a VPS-hosted deployment:

1. Obtain an SSL certificate for your domain. AlexHost provides SSL Certificates that can be installed directly on your VPS.
2. Configure IIS or your reverse proxy to terminate TLS on port 443 and redirect HTTP (port 80) to HTTPS.
3. Set the HTTPS environment variable to true if using CRA's built-in server for local HTTPS testing.

If you do not yet have a domain pointed to your VPS, register one first through Domain Registration and configure the DNS A record to point to your VPS IP address.

Step 7: Troubleshooting Common Issues

node or npm Not Recognized

This means the Node.js installation directory is not in the system PATH. Fix it manually:

1. Press Win + R, type sysdm.cpl, press Enter.
2. Go to Advanced > Environment Variables.
3. Under System Variables, find Path and click Edit.
4. Add C:Program Filesnodejs as a new entry.
5. Click OK on all dialogs, then open a new terminal window.

EACCES or Permission Denied Errors During npm Install

On Windows Server, this typically occurs when running npm as a restricted user. Either run PowerShell as Administrator, or configure npm's cache and global directories to a path the current user owns:

npm config set cache "C:npm-cache"
npm config set prefix "C:npm-global"

Port Already in Use

If port 5173 or 3000 is occupied by another process:

netstat -ano | findstr :5173

Identify the PID in the last column, then:

taskkill /PID <PID> /F

Alternatively, change the port in vite.config.js or pass --port as a flag:

npm run dev -- --port 3001

npm ERR! code EINTEGRITY (Checksum Mismatch)

This indicates a corrupted npm cache. Clear it and retry:

npm cache clean --force
npm install

Slow npm install on First Run

The initial dependency installation for a React project can take 2–5 minutes depending on VPS network throughput and disk I/O. If it consistently times out, check whether the VPS has outbound access to registry.npmjs.org on port 443. Some datacenter firewall policies block this by default.

Decision Matrix: Choosing the Right React Setup for Your VPS

Practical Key-Takeaway Checklist

• Install the LTS release of Node.js using the .msi installer, not the .zip archive, to ensure automatic PATH registration.
• Use npx create vite@latest for all new React projects — CRA is deprecated and should not be used for greenfield development.
• On a VPS, set host: '0.0.0.0' in vite.config.js and open the corresponding firewall port to access the dev server remotely.
• Add an IIS URL Rewrite rule to redirect all non-file, non-directory requests to index.html — without it, client-side routing breaks on direct URL access.
• Always serve production builds over HTTPS; obtain and install an SSL certificate before going live.
• Run npm run build and inspect the dist/ output before deploying — check bundle sizes using npm run build -- --report or vite-bundle-visualizer.
• Never commit node_modules/ to version control; always add it to .gitignore.
• If multiple Node versions are required across projects, install nvm-windows to manage them without reinstalling Node.js globally.

FAQ

Does React.js need to be "installed" on a server, or just the build output?

React itself is a build-time dependency. The production output of npm run build is plain HTML, CSS, and JavaScript — no Node.js runtime is required on the server to serve it. Node.js is only needed on the machine where you run the build process.

What is the difference between npm run dev and npm run build?

npm run dev starts a development server with hot module replacement (HMR) and unminified source maps — it is not optimized for performance and should never be used to serve production traffic. npm run build produces a minified, tree-shaken, content-hashed static bundle intended for deployment.

Why is Create React App deprecated and what should I use instead?

CRA relies on Webpack 4, which has significantly slower build and HMR times compared to Vite's ESM-native dev server. The React team officially removed CRA from their documentation in 2023 and now recommends Vite for SPAs, Next.js for full-stack applications, and Remix for data-heavy apps.

Can I run multiple React projects on the same Windows VPS simultaneously?

Yes. Each project runs its dev server on a different port. Configure each project's vite.config.js with a unique port value, open each port in Windows Firewall, and optionally set up IIS as a reverse proxy to route subdomains or paths to the appropriate port.

How do I keep the React dev server running after I close my RDP session?

Use a process manager. Install PM2 globally (npm install -g pm2) and start the dev server as a managed process: pm2 start npm --name "react-dev" -- run dev. PM2 keeps the process alive independently of the terminal session and can be configured to restart on system reboot.