Deploying a React App to a Subfolder via FTP

Jun 18, 2025, 05:00

If you’ve built a React app and want to deploy it as a subpage of your existing website, you may run into a problem: the screen stays blank. This often happens when you’re hosting the app under a subfolder like:

https://yourdomain.com/build/

React assumes your app is hosted at the root by default. So when it’s hosted in a subfolder, paths can break—especially with routing.

Here’s how to fix it and properly upload your React app using FTP.

1. Set the homepage in package.json

By default, React builds your app as if it’s hosted at /. But if you’re deploying to a subdirectory like /build/, you must let React know in advance.

1. Open your React project and find package.json.

2. Add or modify the homepage field:
“homepage”: “https://yourdomain.com/build/”
Replace with your actual domain and folder.

3. Rebuild your app so paths reflect the correct base:
npm run build
This step ensures all internal links, scripts, and assets are correctly referenced.

2. Upload the build/ Folder via FTP

1. Use an FTP client (e.g., FileZilla) to connect to your web server.

2. Go to your site’s root folder, typically /public_html/ or /www/.

3. Upload the entire build/ folder here (do not upload only its contents).

Your file structure should now look like:
    /public_html/
    ├── index.html ← Main site homepage
    ├── about.html ← Other static pages
    ├── build/ ← React app
    │     ├── index.html
    │     ├── static/
    │     ├── asset-manifest.json
    │     └── ...

Now try opening:
https://yourdomain.com/build/

You should see your React app. If not, move on to routing fixes.

3. Fix Routing Issues (for React Router)

If your app uses React Router, subpage URLs like:
https://yourdomain.com/build/some-page
may cause a 404 error when reloading or visiting directly. That’s because the server looks for an actual file at /some-page, which doesn’t exist.

SolutionCreate a .htaccess file inside /public_html/build/ with the following content:
    RewriteEngine On
    RewriteBase /build/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.html [L]

This tells the server to always serve index.html, allowing React Router to handle routing.

4. Make Sure Static Files Load

Some hosting providers block access to .js, .css, or .map files. If your browser console shows 404 errors, do this:

1. Open or create a .htaccess file inside /public_html/build/.

2. Add this rule:
    <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin “*”
    </IfModule>

This sets the appropriate CORS headers and prevents blocked assets.

Final Checklist Before You Test

  ●  homepage is correctly set in package.json
  ●  You’ve run npm run build after that
  ●  The build/ folder (not just its contents) is uploaded to /public_html/
  ●  You’ve added .htaccess for routing (if using React Router)
  ●  Static assets (JS, CSS) are loading without errors

Optional: Test Before Uploading

Before FTP upload, you can run a local test with:
npx serve -s build
It simulates a production environment, so you can catch path or routing issues early.