I have created a react app with create-react-app in a subfolder of my project. Url of current app is http://app.local and url of react app is http://app.local/v2.
What i want is when i run npm start a browser window should open from http://app.local/v2 instead of http://localhost:3000 and when i run npm build the paths should be point to the relative directory.
I already tried basename and start_url parameters.
Thanks.
Create React App builds your app to be hosted at the server root by default.
To change this behavior, set the homepage in your package.json, like this:
{
...
"homepage": "http://mywebsite.com/subdirectory",
...
}
Related
I want to deploy my react app on / as well as /subdir.
There is a way to deploy it on /subdir by using basename in react-router and changing "homepage":"/subdir" in package.json.
Now this app is to be deployed on docker using nginx. So anyone using the image will have to use exact subdir by using nginx reverse proxy.
And also it'll fail to be available from basepath(/). So user should have flexibility to pass subdir path. I cannot find a way to do this on runtime.
Till now I've tried subdirectory deployment, which restricts me from running my docker image at basepath(/)
I've looked a lot into this problem but couldn't find any solution so far.
Edit::
So my app is deployed at path /dashboard. The image is pushed to gcr.
Here is my docker-compose file.
version: '3.6'
services:
explorer:
image: my-image
container_name: my-container
ports:
- 3030:80
To deploy a React app on a base URL as well as a subdirectory path, you can use the following steps:
1-Build the React app: Run the following command in the terminal to build the production version of your React app:
npm run build
2-Serve the build folder: To serve the build folder, you can use a package like serve. First, install the package by running the following command:
npm install -g serve
3-Start the server: Run the following command to start the server and serve the build folder:
serve -s build
4-Configure the subdirectory path: If you want to serve the React app from a subdirectory path, you can use the basename property in the BrowserRouter component in your index.js file. For example:
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<Router basename="/subdirectory">
<App />
</Router>,
document.getElementById('root')
);
5-Deploy the app: Finally, deploy the app to your preferred hosting platform. Make sure to configure the hosting platform to serve the React app from the subdirectory path specified in the basename property.
By following these steps, you can deploy a React app on a base URL as well as a subdirectory path.
I'm deploying an app on a host that has the following setup:
https://example.com/app1
https://example.com/app2
etc.
I need to deploy under a custom root path /app for my React app that will sit under this umbrella. I'm using react-router v5 and create-react-app.
Problem
When I build the app (I'm using vercel's serve), I get a blank page. When I go to localhost:5000/app/, nothing shows up.
I did all the suggestions from here and here, but still can't get my app to load.
I'm also confused: what's the difference between using react-router's basename and CRA's homepage field? Should I be using both, or one or the other?
EDIT: Potentially found the problem. Setting homepage=/app also changes the paths for my JS bundle, which it wasn't recognizing (hence the blank page). I manually added a app folder inside my build dir, like so: build/app/static and it worked. Shouldn't CRA do this automatically?
My setup
app.tsx
<Router basename={process.env.PUBLIC_URL}>
...
</Router>
package.json
scripts: {
"build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",
Command to serve the prod build locally
> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000
The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
I navigate to http://0.0.0.0:5000/app/ and get a blank page (no network calls).
What I tried
set homepage: "/app" in package.json source
set the basename for react-router source
The CRA docs shows an example using the full path of the website. That didn't work either:
"homepage": "https://example.com/app",
I got it working, although it's a workaround.
As Mohit's comment mentions, the homepage field makes it so all the assets are pre-pended by that sub-path defined in homepage. I was getting a blank screen because it couldn't find the new path to my JS bundle, aka it went from serving /build/static/js/.. to /build/app/static/js/...
Solution (workaround)
Create a new folder called app (or whatever your new root path is called) under your build directory.
Move your /build/static folder to build/app/static.
This is what it looks like with Dockerfile:
RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)
You can take out the pwd and echo lines, I added it so I could see it working.
I don't know why CRA doesn't do this by default. It might be because I'm using react-app-rewired, which messes around with CRA's webpack config?
How can one deploy a create react app to gh-pages?
My packages.json folder has my homepage listed exactly as this: "homepage": "https://mgcraig78.github.io/RoboFriends",
However, the app will not deploy to gh-pages, and when I enter npm run build, the terminal tells me this (which I'm assuming is the issue, but I can't figure out how to fix it): The project was built assuming it is hosted at /RoboFriends/. <- this obviously is not the homepage I have entered into my packages.json file.
Remove the /RoboFriends from your homepage link in package.json to:
"homepage": "https://mgcraig78.github.io"
Then run
npm run build
What you deploy to github is what's inside the build folder that contains index.html
I created a build of my creat-react-app reactjs application. It is very simple for now.
So I am loading this react app from within a web application, but it is loading not from the root but from a subdomain.
The problem is the css and js files are expected to be at the root ie.
/static/js/main.3a52edf1.chunk.js
How can I change this to:
/public/app/static/js/main.3a52edf1.chunk.js
I am currently justing doing yarn run build to generate my build.
For that you can you the homepage attribute in pacakge.json
References:
https://til.hashrocket.com/posts/xtgpx9kssz-set-the-relative-path-of-assets-in-a-cra-app
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In your package.json set the homepage attribute to:
"homepage": "."
Now, all your imports will be relative to your index.html
I have an issue where I deploy my React app the images are not showing. Works fine locally. I've set the homepage to a GitHub site http://ryandixon555.github.io/react-board-game and run
npm build
then
npm deploy
but still no images. I've also specified the homepage in the package.json:
"homepage": "http://ryandixon555.github.io/react-board-game"
In the end I gave up and deployed using netlify, following this link and then copying my code over.