I try to test the build of my react application.
On dev environnement, I do yarn start and all works fine on http://localhost:3000/
I want to deploy the build on my apache server:
http://www.myserver.com/myreactapp
Then I have update my package.json file to specify 'homepage' target by adding the line :
"homepage": "http://www.myserver.com/myreactapp",
Then I run : yarn build all and everything is ok.
I upload my files on my server and test the website.
I have no error on console log, CSS and JS are loaded, the background image (define on my CSS) appears. But nothing else happens. It seems something is wrong with Router but how to debug and/or fix it ?
Thanks,
Orb
Related
I'm trying to launch a React app (create-react-app) to GoDaddy using cPanel and I am having issues creating the correct build. I am setting the homepage in package.json underneath "name" and "version" (not sure if order matters here) like this:
"homepage": "http://mydomainname.org"
However, when I run npm run build, I get a message saying "The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json.
Has anyone encountered this problem before?
That message is not an error. After you run the npm run build command a folder named build should appear and it contains your react app. You need to upload the contents of that folder to the public_html folder in cpanel's file manager. (Make sure you are uploading what is inside the build folder and not the build folder itself). Here is a link to a short tutorial
I have created a site using CRA, If I run build it all works fine on Github-pages, but when I attempt to run the site through my Netlify account it shows up a blank page. It's connecting to the site as the html is showing with my React page. but there is no content. The Repo in Github has a client folder in which is my build folder. I have tried everything to get this working, am I missing something simple?
This is my Package.json file:
My Netlify settings point to the correct directory:
There is also a 404 error showing when the page loads:
I changed the homepage of my package.json file to "." and then on netlify changed the settings to not see npm warnings as errors which I think was blocking the site compiling. This was done by adding CI=false on the build command on netlify.
Everything is now working
Issue: I'm trying to deploy my react js project on iis and it just loads a blank page.
Info: In order to deploy application, I ran npm run build to create a production build and then set up the site through IIS pointing to build folder. From debugging mode in the browser it looks like its not loading some of the js files:
Screenshot of Errors: https://imgur.com/axoyXk6.jpg
Does anyone have any tips on how to solve this issue?
Solution :
Delete current production build folder
Add "homepage": ".",
in the package.json file as advised in stackoverflow.com/q/55568697/6281832 .
Open a cmd and type "npm run build" to create a new production build
Deploy build as indicated in React Deployment on IIS server
Enjoy your live site :)
I have installed React JS using create-react-app. The app has been installed successfully. But when I try to runt the app using npm start it compiles successfully but in the browser it shows the error Requested resource "/" was not found on this server. I don't know what is the problem, because everything was working perfect until that time. I was already working on a react js app and suddenly this problem occurred, and even when I created another app, I got the same error.
Console
Starting the development server...
Compiled successfully!
You can now view resume-app in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.10.12:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
Make sure that you have public folder inside your repository. index.html file also need to be inside public folder. It would be better if you provide the repository directory tree.
This may not be a proper solution. But specifying a different port (e.g. 3001) in package.json worked in my case, may work for others as well.
"start": "PORT=3001 react-scripts start",
How can I get Parceljs to work with react? I'm using their example from their repo but it wont work.
https://github.com/parcel-bundler/examples
After I run 'npm start' it works and renders the page on localhost as expected but it will not work when I click the outputted file in /dist. So the page is just blank when I try to load it from dist/index.html. I also tried the production command from their website so it would stop watching the files but that also resulted in the dist folder loading a blank page.
How can I do this? Any help would be great. Essentially I want to be able to access the buddled files without localhost.
Thank you.
You're running the index files locally and the index.html is expecting the the css file and the js file to be at the root. When you're opening your file locally it is trying to find under C://
To get around this issue you have to edit the index.html unfortunately after you have compiled it. Here are three ways to get over the issue, method three focuses on fixing your issue but I would recommend methods one and two.
Method One
Install http-server by running npm install -g http-server
Go to your project dist folder via the terminal / cmd
Type http-server
Your project will open up in your default web browser
Method Two
Upload your application to a web server
Your application should run
Method Three (Not recommended)
Add the NPM script "production": "parcel build index.html"
Run production build by cd to your project and type npm run production
Go into your dist folder and open up the index.html in an editor
Edit the css file path from href="/main.--------.css" to href="./main.--------.css">
Edit the js file path from src="/main.--------.js" to href="./main.--------.js">
(NOTE: The React Add-on will not detect React when it is being opened locally, but the application will work fine.)