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. :)
Related
I have built a react app using a truffle box that uses create-react app. I can get the app running on my local host but I can't see it on my VPS when I go to the IP address of my VPS and I run exactly the same commands and I get the same output in the terminal. I go in to my client dir and run npm start. I have tried to make a build and run the build through an http server in the client dir and the root folder of the VPS.
I run
serve -s build
All I can see is the index of the build in the browser when I try and serve the build through a webserver. When I run npm start on my localhost I can view my app but it doesn't work on my VPS. Please help me I've been struggling with this for days and its the last part of my project.
You need a webserver in any case.
When you do a local development, you do use webpack dev server (which is inside of create react app).
For the production, you need to make a production build and serve it for example by nginx. Here some details how to create production build with CRA https://create-react-app.dev/docs/production-build
On your screenshot, you don't see your site, because there is no entry point in your folder. By default it should be index.html
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",
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 am deploying a website that will have a few react projects that were built with create-react-app. Each project will be on its own webpage: e.g.: mywebsite.com/project1, mywebsite.com/project. I am setting up an nginx reverse proxy on an Ubuntu server (which I understand how to configure), but I am not sure how to specify port numbers for each of my create-react-app projects so that each of them has a unique port. Can anyone shed light on how to do this? Thanks!
PS - I have seen threads such as this one - How to specify a port to run a create-react-app based project?, but I do not see how this solution can be applied in production.
The server you start with npm start command in create-react-app is webpack dev server. It only meant to use while development and you shouldn't use that in a production environment.
Instead, you can easily host a CRA app with a simple static file server which can easily configure with nginx without a reverse proxy or changing the port of dev server. You simply need run npm run build command and deploy content of build folder to the appropriate folder of your static file server. You can read more about this in the documentation of CRA.
Also, make sure that you specify the homepage in your package.json before building the project, since you are going to host your app in a relative path like mywebsite.com/project1. Because CRA assumes your app is hosted at the server root with default settings.
Hope this helps!