Menu
There are plenty of answers here, and blog posts elsewhere (including official documentation https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths) explaining how to build your react app so that it could be run from a subfolder.
However, I can't find a way how to run it from a subfolder while I'm still in development mode. (i.e. without running: npm run build)
I want to see the app running on localhost:3000/web when I execute: npm start. Not localhost:3000. The static resources that are injected automatically (such as
src="/static/js/bundle.js"
src="/static/js/1.chunk.js"
src="/static/js/main.chunk.js"
src="/main.947eb2055b7df4ce1a9e.hot-update.js"
) should have their path adjusted accordingly to include the app's subfolder name "web".
Is it possible?
Should I "eject" the app and config thing myself?
Should I clone and change "react-scripts start"?
Is there any simpler way?
Thanks
UPDATE:
I should have given more details. I do use reverse proxy "http-proxy-middleware" that's the reason I need to run each app in subfolder. The suggestion below using "basename" of BrowserRouter works for links but not for injected static resources such us "/static/js/bundle.js" The "web" is not added to these when you use "basename", "homepage" and run as: npm start.
So when you run it behind reverse proxy on port 80 it tries to access localhost/static/js/bundle.js which doesn't exist. It should access localhost/web/static/js/bundle.js instead. But as those links are injected automatically I don't have control over adding "web" as a prefix.
285
Create a New React Project To create a new app/project using this tool, all we need to do is run the command "create-react-app" followed by the app name. After running the above command, a new folder called "my-sample-app" will get created and that would have all of our application code.
Use a dot for the path to create a React app in the current directory, e.g. npx create-react-app . or npx create-react-app . --template typescript for TypeScript projects. Make sure your folder name doesn't contain special characters, spaces or capital letters.
npm install app1 (assuming app1 is your first app name). After it is installed, you can see your app1 files inside the node_modules/App1/ . Now your can import the files or components you want and use it in other apps. Hope this helps.
When working with BrowserRouter you can achieve this, by just adding basename as prop.
From the docs,
The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
<BrowserRouter basename="/web">
//Your routes
</BrowserRouter>
Note: Also need to maintain an entry in package.json file as
"homepage": "http://Domain_name/web",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
