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 :)
Related
We used react-boilerplate to create and application. And we've used material-ui as the UI library and hosted on Azure IIS.
Due to a recent material-ui package release, somethings are breaking on local environment and not in the deployed application. I just want to make sure if it's just in the dev environment or deployed react app uses a previous package.json version to make sure npm install won't break the deployed application.
(The package.json file in wwwroot folder shows the express server package.json, but I want to find the react application package.json or versions)
So, how can I find the package.json file of the deployed application ? Or how can I check the installed versions (package-lock.json or npm ls) ?
TLDR :
How to get the installed package versions of deployed react application (on Azure IIS)?
package.json is used during build to choose dependencies to install for the project. This file does not exist in the deployed files. If you go to Advanced Tools tab on your app service and then click on Tools>Zip Push Deploy, you will see all files on your deployed website. You will not find package.json there as it is only present before the build process.
The only way for you to find the package.json file for your deployment build is if you are using CI/CD, then you can go to Deployment Center tab on your app service, click on the latest build link and see the branch from which the build was triggered. You will find the package.json file in that branch. If the branch has been modified after the build was deployed, you can check history of that branch and choose package.json as on the date of deployment.
If you are not using CI/CD, then you are out of luck.
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",
I have created a simple react app and built the app using npm run build command and uploaded it to host. it works but whole application directory is visible in web browser console. So how do i fix it to not to show web directory on web console. Once the application kept growing and sensible data will visible. So is there any method to avoid that.
Here's the on cPanel File Manager
and js directory has minified js like this,
But once it loads on web browser it shows App.js content,
Any suggestions.
After running "npm run build" , publish your "build" folder. Not your "public" folder.
So, I have spent a couples of months learning react and have now created a react app that works nicely on my local computer using the web address localhost:3000. But now is the big question: how do I deploy the app so it becomes accessible on the internet for everybody to see. Previously I have place on a web hotel where I can host some php files. But how do I put the react app on that web hotel. Or do I need some other service that a normal web hotel cannot handle.
Thanks for any help
/Simon :-)
There's a few great options for pushing out your first React application. Once it's built and hosted on GitHub, there's a few free options for deploying static websites (as long as your app meets this requirement). I suggest checking out GitHub Pages (https://pages.github.com/) or Netlify (https://www.netlify.com/); they offer you the tools to deploy right from your repository.
The short answer is simply run npm run build or yarn build command then the scripts try to create a js file and a CSS file and a HTML file and all your files can access from build folder. so just copy build folder and everything in it to server for example upload it to Heroku or AWS
First you should create build. Use 'npm run build' or if you are using yarn then use 'yarn build' command.
After that you will see build folder in your app having html file static folder.
You can test with any local server in your machine. You can use following chrome extension to deploy your app locally. Just import your build folder inside this extension.
Web server for chrome
Thank you Keith!
I used "Github pages" to deploy my React app and it was surprisingly simple. I found a great short 5 minute tutorial on Youtube: "https://www.youtube.com/watch?v=1Y-PqBH-htk". This is how I did it:
Added this line to my package.json file, at the top level:
"homepage": "https://zimon42.github.io/helloworld"
(zimon42 is your username on Github. helloworld is the name of your repository)
Installed the so called Github pages module by running:
npm install --save gh-pages
Added these two lines to my package.json file, under scripts:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Committed and pushed everything to Git (Dont know if this step is necessary)
Deploying the application by running
npm run deploy
Now simply check out the paeg at https://zimon42.github.io/helloworld.
( For me there was a delay before the changed took effect.)
Also my routes didn't work. Got a empty page. But saw this video: https://www.youtube.com/watch?v=7yA7BGos2KQ&t=114s which described using HashRoutes instead, and then it worked!
/Simon :-)
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