When we create a reactjs project with the npm run build command, links to the "static" folder are created with a / before. Example: src = "/static/css...". When we are going to host on a domain... https://dominio.com/app. We have to update all links by removing the / or placing the static folder inside the root of the domain. How can we specify the root directory for /app/static when creating the project with the npm run build command?
You can specify homepage in your package.json
"homepage": "http://mywebsite.com/app",
Here is Create React APP docs reference
Related
Is there any way to specify that create react app to not create src folder, rather I want the files to stay at root directory so I can work on my project.
I'm afraid, there is no way.
From the documentation about the folder structure
For the project to build, these files must exist with exact filenames:
public/index.html is the page template;
src/index.js is the JavaScript entry point.
Even if you try to use a custom template, it requires src/index.js or src/index.tsx files to exist
There are two possible solutions you can try:
Use craco and adjust webpack configuration to allow the source code to be in the root folder
Eject create-react-app and re-configure webpack
I'm creating a basic React app using create-react-app.
When I cd into the root folder and run npm run start or yarn start, the project url is http://localhost:3000/build.
Why is it adding build to the end of the url and how can I make the server load http://localhost:3000/ instead?
Under the package.json in your project folder root (the one that spawned into existence after you created the app using the create-react-app) there are scripts defined.
There you can see what gets executed when you run npm run start or yarn start -> the "react-scripts start"
BTW, you can just npm start - no need to npm run start since it's the 1st script ;)
So where are these react scripts and what gets called?
Well, in the same root folder there you'd be your npm modules folder named node_modules. And in it after a shitload of scrolling surely there is a react-scripts subfolder and in it a folder named scripts and in it a file named start.js. This is what actually gets run.
This chunk
const urls = prepareUrls(
protocol,
HOST,
port,
paths.publicUrlOrPath.slice(0, -1)
);
I believe, determines URLs and since it glues together those parts the one coming after a port is interesting:
paths.publicUrlOrPath.slice(0, -1)
the paths object is defined in (looking from the same app root path I have been using as a reference from the start)
node_modules\react-scripts\config\paths.js
In this file this piece of code IMHO determines the path you are after:
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL
);
So you have fiddled with process.env.PUBLIC_URL either in Node or maybe at OS level, I am not sys admin ;)
Anyhow, I can give you a "get out of jail for free" card:
In the package.json file (yes, the aforementioned one in the project root) after "name":"app" or whatever your app is named add another line:
"homepage": "",
This will force the require(resolveApp('package.json')).homepage, to come into play and use that instead as the final part of your URL.
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've grabbed this example ReactJS project > https://github.com/alik0211/pokedex to experiment with Azure devops. When I build the project locally and use npm start in the build folder the app works fine. This is the path for a file http://localhost:3000/static/js/0.chunk.js`.
But on my Azure environment http://pokedeks.azurewebsites.net/ the server is looking for http://pokedeks.azurewebsites.net/pokedex/static/js/2.c662eb5c.chunk.js. Notice that the `/pokedex/ folder has been added to the path. I'm unsure why this is happening.
I can reproduce it locally by running serve in the build folder instead of npm start: http://localhost:5000/pokedex/static/js/2.a7ba4e0c.chunk.js
I've tried adding npm start to my tasks in the release pipeline but that's also causing errors. So I think the fastest way is to figure out why when using serve the /pokedex/ folder gets added to the routes?
I fixed the issue by replacing the homepage value in my package.json from "homepage": "https://alik0211.github.io/pokedex/", to "homepage": "./", now when I run serve the paths to the files are correct.
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",
...
}