I am working with a paid API. They whitelisted my ip. I can fetch there data from Thunder Client and postman app. But when I'm going to fetch the data from my react app. It's nothing do anything. Basically localhost:3000 are hosted on different IP right? So how to host my react-app local host from my IP(103.124.251.85)
To change your host for react app you just have to add HOST in your env like below:
HOST=you_system_ip
Or you can also add script in your package json file as well like below:
"start": "HOST=you_system_ip react-scripts start",
In your package.json you can change the "start" script to
"start": "SET HOST=103.124.251.85 && react-scripts start"
Or, you can create a file .env in the root of your project and set:
HOST=103.124.251.85
If you need to run you app over HTTPS, here is what to do:
In package.json you add the prestart script: it combines the private key and the crt of your SSL certificate into a pem and then it will copy it in the webpack server module.
"scripts": {
"prestart": "type dev_certs\\cert.key dev_certs\\cert.crt > dev_certs\\server.pem && copy /y dev_certs\\server.pem node_modules\\webpack-dev-server\\ssl",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
In the .env file you set:
PORT=443
HOST=103.124.251.85
HTTPS=true
If you're hitting an error 'allowedHosts' is empty:
options.allowedHosts[0] should be a non-empty string.
You can disable this check by passing the following env variable:
DANGEROUSLY_DISABLE_HOST_CHECK=true HOST=xxxx npm run start
Related
I am new to electronjs and I am working on an electron app using ReactJs and I am trying to open the dev server using concurrently and wait-on.
Here is my scripts section of package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron:serve": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm run electron:start\"",
"electron:build": "npm run build && electron-builder -c.extraMetadata.main=build/main.js",
"electron:start": "wait-on tcp:3000 && electron .",
},
And when I run npm run electron:serve, the I'm getting this on my terminal
The command doesn't seem to move on to the next section. And when I run electron:start on a new terminal I'm getting this
I had no problem running this on my old laptop two months back and it is not working now. It works fine when I run npm start and electron ..
I've been stuck on this for a while now and any help would be appreciated.
I will make a guess here. According to the discussions on this issue on GitHub, Node 17 introduced a breaking change that might trigger the error you get:
Error connecting to TCP host:localhost port:3000 Error: connect ECONNREFUSED ::1:3000
Adding 127.0.0.1 to your script should work:
"electron:start": "wait-on tcp:127.0.0.1:3000 && electron ."
I am trying to setup for react but my localhost:3000 is giving connection error after npm-start. Can anyone please help me how I can fix the error?
Please have a look at this screenshot to see the error
As a workaround solution, you can fix this by using the legacy provider for OpenSSL. So, you need to edit the package.json and change the configuration of start and build in this way:
{
...
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
...
},
...
}
Save the package.json file and execute the command npm start again and your application should start and open the browser with URL http://localhost:3000.
I have a client app created with create-react-app and it uses typescript. My directory structure is like this (apologies if it's confusing):
-MyApp (folder)
-node_modules (folder)
-package.json (has a script that runs the react client app and the mockApi using, 'ts-node mockApi/server.ts')
-tsconfig.json (this uses module:esnext because apparently CRA requires it?)
-src (folder)
-components
etc.
-MockApi (folder level with MyApp)
-tsconfig.json (uses module:commonJS for server.ts)
-server.ts (creates a json-server in express/node using import syntax)
-mockData (folder)
-index.ts (gathers domain types into single objects)
-someEntity.ts (domain type)
I have in my main package.json a couple scripts. One runs the command 'ts-node mockData/server.ts' to load my typescript mock api on its own port. The other script runs the normal react-scripts to load the react client on localhost:3000. I'm using a lib that allows scripts in parallel.
Before I added this to my existing app, I created the mock api in its own project with typescript and json-server to ensure it would work, and it did. But the "module" key in the api's tsconfig needs to be "CommonJS" to do the dynamic imports. I figured it would work in a create-react-app project if the mock api had its own tsconfig file set to CommonJS. But the script to load the api causes an error.
When I run it, it says "import xxxx is not a module" (in server.ts). The package.json script is using the tsconfig settings in my main project to load the server.ts file, using "module:esnext", instead of commonJS, as defined in my api tsconfig. How do I tell it to use the settings in the other tsconfig?
Here is my scripts section in my CRA package.json:
"scripts": {
"start": "run-p start:dev start:api",
"start:dev": "cross-env REACT_APP_API_URL=http://localhost:3000 react-scripts start",
"start:api": "ts-node ./mockApi/server.ts",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the start:api script is where it's blowing up in my server.ts (the first import):
import jsonServer from "json-server";
import mockData from "./mockData/index";
Is it just not possible to do what I'm trying to do with create-react-app? I've tried to research this but I cannot find anything that mentions this specific issue. Every json-server example is in JS. But json-server has #types for TS so I don't get why this issue isn't documented. Surely others use Typescript with Json-server and c-r-a.
Thank you
So in case anyone has this question, the answer was to have a script in my ui's package.json that goes to my mock api folder and runs a script in that folder's package.json to start the api, and then run my create-react-app script. So I changed my root/package.json to:
"scripts": {
"start:api": "cd mockApi && npm run start",
"start": "run-p start:api start:dev",
"start:dev": "cross-env REACT_APP_API_URL=http://localhost:3000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
then in my root folder, just run this to kick it off:
npm run start
And obviously in my mockApi/package.json I have
"scripts": {
"start": "ts-node server.ts"
}
This works great.
I'm building a project that has a backend, and a frontend.
I had the idea that'd be cool to have both folders in the same directory with another npm script that runs them.
The problem is that I'm unable to set the port in one of the two packages, that being the frontend.
In my main package.json I have this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start-app": "cross-env SERVER_PORT=8080 npm start --prefix ./frontend",
"start-server": "cross-env SERVER_PORT=8080 npm start --prefix ./backend"
},
And it works for the backend, but doesn't for the frontend.
The frontend has the base configuration.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
The project runs, but when I look for the process.env, there's no trace of the SERVER_PORT in the FrontEnd but it exists in the BackEnd.
(Backend scripts are the default for a new npm package).
"scripts": {
"start": "node main.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
CRA uses PORT to define the port variable. Run it like:
"start": “PORT=8000 react-scripts start"
Additionally since CRA is essentially a static site it doesn't have in itself a concept of env variables - these are NodeJS specific. A few such as PORT and NDOE_ENV are defined for you and used in the dev server. If you wanted to use custom env vars within your React components you can make them available by defining the with the prefix: REACT_APP_ such as REACT_APP_SITENAME for example.
Check out the docs here: https://create-react-app.dev/docs/adding-custom-environment-variables/
I have a very, basic, need: to store different endpoints for my APIs according to the environment. Suppose a simple file like this:
API_URL=http://localhost:8080
it should become, for my prod environment:
API_URL=http://myprodServer
and I'd like to have an integration test and a uat endpoint too!
Looking at my package.json I see:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
So my idea is:
Put a command line argument near to "build" and "start" so to specify local and production enviroment files
Have a way to access to said configuration in my app, say config.API_URL
Now, I come from spring boot, and in spring boot I have a file per environment.
I though dotenv could be my solution but I see two strange things on their website:
Please don't commit your .env file --> so, how are my colleagues supposed to build my application? I usually at least push local and test environment, while keeping the uat and production files directly under the server
You should have just one .env file --> ok this one destroys me: if I just have one file how am I supposed to handle several environments???
What am I missing here? Could you help me solve my problem? I'm new to npm so I'm a little confused...
It looks like you are using CRA to develop your React app. If so, your env variables should be REACT_APP_API_URL=http://localhost:8080. Notice the prefix. If you are using CRA, you must use the prefix. More about that here. If you do this correctly, the variable should be available in your javascript by using process.env.REACT_APP_API_URL.
At work, we each have a copy of the .env files locally, since we don't check it in. We have different .env files for each environment - e.g - .env.production, .env.development, .env.stage. We then have a run and build script for each environment in our package.json. Using env-cmd package, our scripts might look like this:
{
...
...
"start": "react-scripts start",
"start:stage": "env-cmd .env.stage.local react-scripts start",
"start:production": "env-cmd .env.production.local react-scripts start",
"build": "react-scripts build",
"build:stage": "env-cmd .env.stage.local react-scripts build",
"build:development": "env-cmd .env.development.local react-scripts build",
...
...
}
Along with this, we also have a git branch per environment so that on stage branch we would run npm run build:stage and deploy to Stage environment. We would do the same for production.
After looking around for a multi-environment setup, this is what I settled on and it works ok. However, I'd be open to improving the process.