Reputation: 1734
Hello i have a reactjs app, and I build my project with bellow command
npm build
Here is my package.json
file:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"},
after build i have folder with build files and index.html file But all paths in this .html are absolute, i want to build with relative path
for example (index.html): now i have:
<script type="text/javascript" src="/static/js/main.af2bdfd5.js"></script> <link href="/static/css/main.097da2df.css" rel="stylesheet"> <link rel="shortcut icon" href="/favicon.ico">
i want this:
<script type="text/javascript" src="./static/js/main.af2bdfd5.js"></script> <link href="./static/css/main.097da2df.css" rel="stylesheet"> <link rel="shortcut icon" href="./favicon.ico">
Upvotes: 128
Views: 104335
Reputation: 16536
What worked for me in nx next react
was setting assetPrefix in next.config.js
module.exports = {
...
assetPrefix: './'
...
};
Upvotes: 0
Reputation: 1173
The solutions above did not work for me. My solution was the following:
index.hmtl
:<base url="%PUBLIC_URL%" />
homepage
in the package.json
..env
, set PUBLIC_URL
equal to the path at which you want to serve the app. This should not include the domain so that the build can be deployed to multiple environments (dev, prod etc.)PUBLIC_URL
.Upvotes: 2
Reputation: 572
I'm using Vite as my build engine instead of CRA. It does not appear to look at the homepage
option in package.json at all. Instead to fix this issue I added a new build option in my scripts that sets the base URL like this:
"scripts": {
"production": "tsc && vite build --base=./"
}
Documentation can be found here. Hope this helps someone. I know this does not answer OP's question but someone with the same issue might stumble on this like I did
Upvotes: 24
Reputation: 91
if your app is directly build in react then set homepage
as "./" or "" empty string in package.json
and if your site build in child react js then for me it was nextjs so i set "basePath" in next.config.js as "" empty string and my issue was resolved
Upvotes: 2
Reputation: 3360
As mentioned in a comment, React's documentation covers this topic:
https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
Facebook recommends to install the tool env-cmd, create a file with an environment variable and a script in package.json to run.
That's a good concept but unfortunately, this fix does not work properly for two reasons.
First, env-cmd requires the path to start with ./
:
"scripts": {
...,
"build:staging": "env-cmd -f ./.env.staging yarn run build"
}
Second, I'm not sure what the environment variable REACT_APP_API_URL
is being used for but at least in create-react-app it's PUBLIC_URL
. Creating a file named .env.staging
with the following content solved the issue for me:
PUBLIC_URL=/projects/my-project
I think the creators of build tools should make it easier to deploy to a subfolder.
Upvotes: 3
Reputation: 4384
// package.json
{
"name": "your-project-name",
"version": "0.1.0",
"homepage": "./", # <--- Add this line ----
...
}
Run npm run build
again.
This will change the path to ./
, which is the relative path of your project.
Upvotes: 280
Reputation: 9528
If you're using webpack, you can try setting publicPath
to ./
You can read more about it here.
Upvotes: 8
Reputation: 411
I encountered a similar issue and resolved it by setting "homepage": "./"
in package.json
I found this solution here https://github.com/facebook/create-react-app/issues/165
Upvotes: 41