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 :-)
Related
I was working on my portfolio and I build it using react and I thought to deploy this using GitHub pages.
So, I started deploying and I've followed pretty much every step given there 'Create React App / Deployment', but I was not able to see the desired result.
You can Check here at thisisnitish.github.io: It deploys the README and I tried everything to fix it but it shows the same result.
You can visit the repository at github.com/thisisnitish/thisisnitish.github.io.
Any help would be appreciated 😊.
Since https://hisisnitish.github.io returns 404, it means nothing has been published by GitHub.
That would be because of the configuring a publishing source for your GitHub Pages site.
Make sure to select the branch main, folder public in order to instruct GitHub to publish your page from those elements.
The OP adds:
there is only a root and docs folder like this
Then you might try, for testing, to generate your site in the docs/ folder, instead of public/.
Or to generate it in a separate branch.
On your package.json, change the deploy script
"scripts": {
... (other scripts)
"deploy": "gh-pages -b main -d build"
}
Moreover, do not push your entire repository on github pages. Only content of /build folder is important here.
Alternatively, you can build your react app locally
npm run build
Then upload/copy contents of /build (index.html etc.) to your repository.
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'm new to yarn, nodejs and react apps. I've tried running the Sizzy app and it works on my local XAMPP server if I first run yarn start in the cmd terminal and then access via http://localhost:3033, but after a while I have to rerun the same command. I've tried yarn build and then navigating to the build directory but that just loaded a page with a header, it didn't have the same functionality. And the contents of the build directory looks very similar to the contents of the public directory anyway.
I've had a look at this SO post and this one but still unsure why I need to run yarn start everytime.
UPDATE:
I'm still not sure how node, react, and electron fit together and why each is required, much research and learning still to do! Rather than a 'react app' I believe I'm looking at an 'Electron app'. I think if I run the command npm run package-win then I think I should get an exe file and some dlls. But how to instead setup for running on an Apache web server without having to start using the command line, or would you just have to build it with different architecture?
Starting to get a vague understanding from reading this.
If you used the npx create-react-app <app-name> then you just have to change the "start" script in the package.json file as "serve -s build". Run yarn add serve to add For deployment, Heroku is a good choice. Create a Heroku app and connect your git repo to the newly created app. Then go to the deploy tab and deploy your branch.
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 a working react.js application, which works using npm start (app built using create-react-app).
When I try to run npm run build, it builds the application. I serve it using
serve -s build -l 3000
It loads the first dashboard page but does not communicate with the server. I have put console.log statements in server to check for any requests coming in, but it never logs anything... which means the client does not talk to the server.
I have proxy statement in package.json to connect to server on port 3300. This works in development mode but in production mode it seems to not pickup the proxy settings in the package.json.
Please guide... this is my first time switching to production mode... any guidance on switching to production mode would help.
BTW I use react-loadable as well...
The proxy field in package.json is only used in development by webpack-dev-server. You can learn more about this here
Thanks for all the help guys....
Finally, I understood that "npm run build" just creates the static files to deploy. But how to use it, is our hands. :)
I copied the build folder inside the /server folder and added the following line in my root server.js file itself. Basically, served the static files from /server/build folder and it all works beautifully.
app.use('/', express.static(__dirname+'/server/build'))
Thanks for the support. :)