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.

CodePudding user response：

Your title said as subdomain, but your example URLs are subdirectory/subfolder. So I assume you meant how to build react app as subdirectory.

the blank page mean the resource is not loaded because the resource path is using root path(/). To change the base path, you just need to add basename to your router :

<Router basename={'/react/alphabets/build'}>
  <Route path='/' component={Home} />
</Router>

and also you need to add homepage to package.json. example:

{
  "name": "react-example",
  "homepage": "/react/alphabets/build",

or another way you need to move/copy public/react/alphabets/build/static to public/static/

CodePudding user response：

If you want a subdomain (ex https://alphabets.bunlongheng.com) you need to edit routing module, all SPA is working fine becouse you are working on the root.

If you want a route into your domain (ex https://alphabets.bunlongheng.com/react/alphabets) is easier on Lavarel side because you just need to copy build content, but you need to override the default assumption that your app is hosted at the server root at different level: module bundler and client side routing.

Module Bundler

I personally use https://vitejs.dev/ in my projects but a very popular bundler is https://create-react-app.dev/.

The bundler links file referring to the root!!

Visiting https://www.bunlongheng.com/react/alphabets/ and opening the dev tools we can see on console errors that the webpage is searching for https://www.bunlongheng.com/static/css/main.f05a5dc1.css but the file is on https://www.bunlongheng.com/react/alphabets/static/css/main.f05a5dc1.css

Please check your bundler documentation to fix this. If you are using CRA this is the docs for absolute and relative reference.

Client side routing

If your next project will use a client side routing like react router, you will need to configure a basename on client router docs