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.
Related
I have a React app which holds the code for a custom component that will be leveraged as a shared component in other apps. I've implemented a rollup.config.ts which outputs the following dist directory for the component:
|-dist
|--index.js
|--index.es.js
I'm creating developer documentation for the update process. Seems best to have developers test the updated npm package on a local copy of a consuming app before pushing the updated npm package code to the repo. Looks like npm install supports local directories and packages.
https://www.stefanjudis.com/today-i-learned/npm-install-supports-local-packages/
Looks like this ^^^ approach requires the defined package path to have a valid package.json. So how would you typically configure this? The following rollup.config.ts encounters an error and writes it to the log, although the specific error does not appear clear in the log file:
output: [
{
file:'package.json',
format:'json'
}
],
I'm assuming that the output config above (or similar) is required, since the url above says that package.json is required in the dist folder for npm install via local directory. What's the best way to automate inclusion of package.json into the dist folder?
Also, let's say that the shared npm package is named "user-manager" and that's how it's installed in my local ConsumerApp. What would be a good way to test the package updates via local consumer app?For example, should the documentation say something like:
Copy "dist" folder from user-manager project to top-level of
local ConsumerApp
Rename "dist" folder to "user-management"
Open git bash to that "user-management" directory and "npm install user-management"
Test app
If success then roll back ConsumerApp changes and push code updates from user-manager project
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 am facing blank page issue when the build is run. npm run build. I served the build locally to test out before deploying to test environment, it showed blank page.
The methods I tried so far-
1. homepage: '.' in package.json
2. baseline for BrowserRouter but my base route is '/', just gave it a try anyways
package.json
Please let me know if you need any other code, thanks!
I found the issue. The problem was inside the manifest.json in public folder. I had to update start_url to '.' from './index.html'. This is enabling to server to search the static files inside the build folder. Build folder, because manifest.json would also be present in build.
NOTE: Make sure, you cross check whether react-scripts is compatible with react and react-dom you are using. Sometimes this fixes too.
I've just run "npm run build" on a react app built with the create-react-app npm package. The issue now is that all the minified and bundled files and folders are referencing the root folder, when they are in a sub-folder. I've tried changing in index.html but that doesn't seem to work. Help?
#Jason Xu and #Mamdoh Saraireh thank you so very much for responding and attempting to help me.
It seems I am a complete idiot and did not read the full output of the build message. The solution to my problem is to add
"hompage":"./"
into my package.json file before running npm run build
This is clearly something I'm misunderstanding but I'm desperately struggling to find an answer.
I've been teaching myself React with create-react-app, I've run "npm run build" to spit out my finished project, and I have the project pushed to a private bitbucket repo.
My expectation would be to then SSH to my server, and git clone the /build directory in order to make this project live. Obviously that is possible (if I removed /build from .gitignore), but since the /build directory is in .gitignore this clearly isn't the intended/desired behaviour.
So, my question is - what is? How does one publish a completed build to server without pulling from git (and obviously without FTP)?
Thanks!
The build directory is in .gitignore as it can be generated from the existing files.
To minimize upload/download time only essential items should be kept in the git repo. Anything that can be generated need not be in the repo (The build directory in this case).
If you are working on a server that has node (AWS, Heroku etc) you can git clone the entire repo on the server and then run npm run build there (after npm install). Then you can do something like
npm install -g serve
serve -s build
The serve module serves static files and you pass the build folder as a parameter.
If you are working on a more old style server like Apache static hosting with cPanel etc then you will need to upload the entire build directory containing static files and index.html.