I am working on ReactJS application using create-react-app.
The npm start and npm run build application is working fine, The application is running in a port number like 4000 or pushstate-server build in the port 9000, The problem is that I need to run the build application without port number in a public url like http://sample/home/ , when I browse directly the build/index.html it is showing the home page correctly but the routings is not working as like in port,All of the css and assets are showing not found.
Change the port to 80.
This is the default value for HTTP requests, so, when you try to access
www.google.com
in fact you are accessing
www.google.com:80
You have to serve your app with a webserver instead of Webpack Dev Server, which is a dev tool which is not made for production.
Checkout my answer here for more information: How can I serve a reactjs app through https?
Related
I am Building a tiktok-clone using react js ..with the help of netlify cli (Netlify Dev)..it works very fine in localhost:8888, but it doesn't work in localhost:3000.My database for this project is datastax astra. Need Help!!
This is the pic...on localhost:3000 and also after deploying on netlify it shows the screen same.
This is the pic when its run on localhost:8888 as a netlify Dev.
Please help!!!
PORT 8888 is the port your Netlify dev server runs on. You should access your application on PORT 8888 when you run netlify dev.
PORT 3000 is the port for your webpack dev server.
I was working on this same project today and trying to figure out this exact same problem but found the solution. It's an old question but for those still doing this workshop and come across this.
Reason why -
you have a file called .env that has your astra info on it
because you have this file on your local host, it will run netlify dev properly and use the info from that file
the problem is when you launch on the web, you can still have .env on your repository but it is ignored because of the .gitignore file
even if you delete the command in the .gitignore file, it won't work (no idea why)
Solution -
you have to import the .env info to your netlify environment variable so it can connect your netlify to your astra through the actual servers
Run this command in your integrated terminal:
netlify env:import .env
After rebuild and redeploy to production with netlify:
netlify build
netlify deploy -p
Note: I'm not 100% positive if it is necessary to build and deploy again. It just happened to not work for me until I did.
You don’t provide enough context. 502 error serves different purpose on particular sites so we can’t understand your problem. If it worked on 8888 then why would you want other port to take its place? As I could see your frontend is served on 3000 but media is not which could lead to 502. Are you running 2 seperate frontend server and backend server?
In my case, the problem was Netlify could not access my .env keys. To overcome it, I opened my app dashboard on Netlify and then click on: 1) site settings 2) environment variables 3) add a variable
For key just enter your variable name as it is in your .env file.
For values enter your variable value. No need to put ""
scopes can stay default (All scopes and Same value for all deploy contexts)
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
Not sure if this is possible and not really sure where to start.
I have taken over maintenance of a React App that is embedded inside a Drupal 8 build. It's built as a custom module and running from a specific route on the website. Ex: https://example.com/portal/{react-app}
Currently if I need to make any code changes I have to rebuild the app before I can see it render on the screen, using npm run build.
I'm trying to have this app run in development mode so it can watch code changes and render automatically, but the problem is it forgets about the Drupal side when doing this. None of the Drupal dependencies are being loaded which results in a broken app.
I'm running this inside a Docker container using port 80. The react app runs on port 3000 when in development mode. Changing Docker to run on port 3000 doesn't work because the React app complains about port 3000 being in use.
Is there a way I can still run the app in development mode using port 3000, while still having Drupal running in my container on port 80?
Example config:
https://example.com/portal/{react-app}
version: VERSION
js:
/modules/custom/{react-app}/js/build/static/js/main.chunk.js: {}
/modules/custom/{react-app}/js/build/static/js/vendor.chunk.js: {}
/modules/custom/{react-app}/js/build/static/js/runtime-main.js: {}
css:
theme:
/modules/custom/{react-app}/js/build/static/css/main.chunk.css: {}
I start my React app using:
npm start
This starts the app on localhost:3000
I would like to have it start with a domain instead of localhost. When testing locally, I have a local domain (example mydomain.com) set to IP address 127.0.0.1. This allows me to use the actual domain in code when making requests to the backend. Without this, my code would need to support both localhost and my domain and swap them out in production.
npm start is only a command to run your react app in development mode.. for faster build and publish functionalities..
So for production, you will be using npm build to get a production build for the same. This won;t be automatically deplyed or hosted on your localhost:3000.
So production deployment you will have to host your compiled build files using IIS or some hosting application. There you can configure your preferred DNS, whcihever domain name you would want to use.
You can customise the url for deployment for development.
In your .env.development add this line
HOST='mydomain.com'
If you want to deploy at https, add this line also in same file
HTTPS=true
I want to test my react app on my smartphone.
I am not using react native because I haven't learned that yet.
As you see, port number is 8080.
What I tried to run my app on mobile:
tried iconfig in terminal and got my IPv4 address.
after that, typed my ipv4 address:8080 in my mobile chrome browser.
Something like that:
192.1xx.x.xxx:8080
but shows err_connection_timed_out error.
On the other hand, I can connect to 192.1xx.x.xxx/dashboard. It works fine.
Can't understand why I can't run my react app on my mobile browser if I can connect to xampp dashboard.
And of course, my smartphone and pc are using same wifi.
if you are using webpack-dev-server and running app on localhost. you will not be able to run your app over the network, i dont know why, but thats how it behaves.
instead you can build you application. and run a python server or nodejs server in your dist folder, then it will work over your local network.
if you have python 2.7 you can run python -m SimpleHTTPServer 9090 in your build dist folder. to start a server on port 9090.