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
Related
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
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
enter image description here
while deploying my Reactjs app on GitHub I am facing page refresh problem, however, on localhost app is working fine, pages are refreshed and get the component.
it seems that this is a project build problem.
I need a solution for it that why this problem is coming on project build.
Also, I did not install my packages using --save flag, I am confused about that flag options.
Whenever I deploy my heroku app with the create-react-app buildpack, the first time I try to access my domain, the page loaded is white and there is an error in the developer console saying
Uncaught SyntaxError: Unexpected token <
in the file main.6396d38a.js:1 which is generated by the react build. However, when I refresh the page, the website works perfectly fine. Is there a reason this could be happening? I tried to replicate the error on my localhost using npm run build, and serve -s build but my website works perfectly fine there. Why would this only show up once after every react deploy to heroku?
My package.json has a homepage associated with the domain name of my website (not .herokuapp.com)
"homepage": "https://www.example.com/"
Inside your package.json make sure your homepage URL is correct:
"homepage": "https://app.herokuapp.com/"
Update
Further investigation shows this was a caching issue. Clearing cookies, website content, and DNS fixed the issue.
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