How to deploy a build react app in your existing Laravel site as subdomain?

Question

npm run build

I build a simple react app; this is what I see in build/ folder

jdoe@AIR  ~/Sites/react/alphabets/build   main ±  tree
.
├── asset-manifest.json
├── favicon.png
├── index.html
└── static
    ├── css
    │   ├── main.f05a5dc1.css
    │   └── main.f05a5dc1.css.map
    └── js
        ├── main.cec1e2e8.js
        ├── main.cec1e2e8.js.LICENSE.txt
        └── main.cec1e2e8.js.map

4 directories, 8 files

Since

I also have a Laravel site that I deployed.

I thought I could drop it in my `public/ and navigate to it like so.

https://www.bunlongheng.com/react/alphabets/

I tried SCP my build/ it to public/react/alphabets/build in my server.

When I go to it, I see no error, no forbidden, but a white screen.

I need a way to deploy react projects as simply as possible since my goal is to deploy more than one... ex.

mysite/react/first-project
mysite/react/second-project
mysite/react/third-project
mysite/react/forth-project

and so on... 

& leave my main site as it...

Any hints for me ? I know I am close.

Answer 1

Make sure in ur package.json like:

// package.json 
{
  "name": "alphabets",
  "homepage": "alphabets",
  ....
}

Note: Use sed to update homepage automatically.

• Create a file called .env at your project root (where package.json is located), and write in this file:

REACT_APP_BASENAME=react/alphabets

Note: is better to use cross-env or any other alt (dotenv ...) on your build proccess.

Put empty value for REACT_APP_BASENAME= and remove homepage or put / if you want to run on localhost.

• Update your BrowserRouter to fix white screen issue, follow:

import React from "react";
import { BrowserRouter } from "react-router-dom";

const baseName = process.env.REACT_APP_BASENAME ?? "";

const App: React.FC<> = () => {
  return (
    <>
      <BrowserRouter basename={baseName}>
        ....
      </BrowserRouter>
    </>
  );
}

export default App;

• Move build files to:

mv ~/Sites/react/alphabets/build/* ~/Sites/react/alphabets/