I used Create-React-App to create a react application, now I want to have 3 different envirement variable for build :
1 - Development
2 - Staging
3 - Production
I follow this article from Facebook. So based on this artile, now I have 3 .env files in my project :
.env.development
.env.staging
.env.production
in each one of this .env files I have my API address based on the stage we are building the app, like this :
API_URL=https://MYAPI.com/STAGE
in my package.json I have these scripts :
"scripts": {
"start": "env-cmd .env.development react-scripts start",
"build_development": "env-cmd .env.development npm run build",
"build_staging": "env-cmd .env.staging npm run build",
"build": "react-scripts build",
}
In my component which call this api URL, I use this to get the API_URL :
let apiUrl = process.env.API_URL
So once I run for example : npm run build_staging
It will build the app but once I debug it, apiUrl is always undefined.
Not sure what is wrong? anyone had such a problem?
I believe your environment variable names need to start with REACT_APP_ using create-react-app, as stated in the same GitHub page you linked. Changing your API_URL to REACT_APP_API_URL should fix the issue.
Related
My React.js app was created with this command:
npx create-react-app my-app
Now how can I convert this script section in package.json to run the app without react-scripts?
"scripts": {
"start": "NODE_ENV=development node_modules/react-scripts/bin/react-scripts.js start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Should it be something like:
node index.js
How do I convert each option in that scripts section?
Thanks
When you create a React app with npx create-react-app my-app you make your react app dependant of react-scripts.
If you no longer want to use this react-scripts who give you a lot of help you can follow this tutorial from the official documentation to eject yourself.
But you can't remove the dependency from an existing project, maybe you are considering to make a new one, and this tutorial will help you to achieve it !
I am trying to deploy a react app with the backend into the same repository on github pages. It all works fine until I add the backend code to it. I can deploy the front-end, but I cannot figure out how to deploy the backend to github.
In my package.json I have the followings:
....
"scripts": {
"start": "react-scripts start",
"server": "nodemon server.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
...
I have pushed it to github. Installed gh-pages package.
I have added
"homepage" : "https://[your-user-name].github.io/[your-repo-name]/"
“predeploy”:
“deploy”:
I think this is where I am going wrong. I know what predeploy and deploy should specify, but I have tried to enter a thousand different versions and I am getting error.
Github pages will not execute any serverside code. You may only upload static files (html,css,js, images, etc.).
In order to have a hosted backend you should look for another service like Google Cloud, AWS Lambda, Heroku, etc.
I noticed after building and deploying a Next.js website that the black compile indicator still shows up in the bottom-right of my browser like it would locally.
This indicator: https://i.stack.imgur.com/FVWEU.gif
On Next.js's website:
This indicator is only present in development mode and will not appear when building and running the app in production mode.
Even locally when I run yarn build and yarn start, the indicator displays while the page loads.
During the build process, it says:
Creating an optimized production build
Done in 20.89s.
My concern isn't so much that the indicator is displaying, because I can disable it. I'm concerned that I'm not getting an optimized build since something is displaying that should only be displaying in development mode.
Note: I can't share a link to the website as it is work-related.
Has anybody seen this issue before?
Thanks in advance!
Technical information:
Next.js Version 12.1.1
Dockerfile:
FROM node:16.13.0-alpine
# Install packages.
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
# Copy all other files.
COPY . .
# Build the app.
RUN yarn build
# USER node
EXPOSE 3003
CMD ["yarn", "start"]
package.json (scripts block):
"scripts": {
"dev": "node ssr-server.js",
"build": "next build",
"test": "node_modules/.bin/jest",
"test:coverage": "node_modules/.bin/jest --coverage",
"test:watch": "node_modules/.bin/jest --watch",
"start": "node ssr-server.js"
},
In the custom server JavaScript file, there should be a line that check if the environment is development or production:
const dev = process.env.NODE_ENV !== 'production'
update the start script in package.json to set that environment variable:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node ssr-server.js"
}
I currently working in a react - expressjs project which was worked by someone before.
Currently, when I'm trying to run the command
npm run build
The project shows me the following error:
What can I do with that error?
As an additional information (I don't know if that is related), when I try to deploy any change I do in the project it doesn't take it into account due as I understand, the deploy depends on chunk.js files (created by the build). I mean, chunk.js files are not been updated.
And in the configuretion of the deploy... the project specifies that I needs to point those chunk.js files
How can I change that configuration?
Here is my package.json file (the scripts section)
Thanks in advance
can you share your package.json Scripts ? there is a possibility you are missing the "build" Script
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
try to reinstall the dependencies again globally, check this link => reactgo.com/react-scripts-command-not-found and sh: react-scripts: command not found after running npm start
I have been using create react app for a while. 'npm start' or 'yarn start' autoreloads works fine by itself but now I have an another problem. Currently I run the app on express server through the build folder, and I use 'npm run build' since express is serving the built files. There are many api calls which requires the app to be ran through this way. Now it become tedious to manually do 'npm run build' every time. Is there a simple way or work around to build automatically just like 'npm start' without eject the app(I know could eject and configure webpack to do that, but i don't want to go down that path)? Thanks
Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though:
Install npm-watch
npm i --save-dev npm-watch
package.json
{
"name": "react-app",
"version": "0.1.0",
"private": false,
"devDependencies": {
"npm-watch": "^0.1.8",
"react-scripts": "0.9.5",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
}
}
Afterwards, just use npm run watch to start up npm-watch so it can rebuild your assets on changes.
Update:
React-scripts now includes a proxy option that proxies requests to a different host/port. For example, if your backend is running on localhost at port 9000 under the /api route, then you would add this line to your package.json: "proxy": "localhost:9000/api". You could then make requests as you normally would in production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)
While this doesn’t really answer your question, you shouldn’t be using npm run build in development. Not only the rebuilds are slow, but it also skips important React warnings for performance and size, so you’ll end up scratching your head more and getting a lot less details in the warnings.
If you just need to do API requests with Express, use the proxy feature which lets you proxy API requests from npm start to your server. There is also a tutorial with a matching repository demonstrating how to do that.
In production, of course, you should use the build produced by npm run build. But you would only need to run it before deployment.
Run your backend on a different port. If your running on express modify the file bin/www
var port = process.env.PORT || 9000
and in your /src folder create a config file where you configure your api host,routes, params etc
//config/index.js
export const Config = {
protocol: 'http',
host: window.location.hostname, //or the environment variable
params: '/api/',
api: {post:'/posts/'}
}
and in your calling component or where ever your calling the api's
import {Config} from '../config'
axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)
The easiest way that I found (as of 10/19/21) is to use cra-build-watch.
Works perfectly.
i am also using create react app, this is how i modified my scripts to run project for development(windows), build the production build and run the production build.
"scripts": {
"start": "set PORT=8080 && react-scripts start",
"build": "react-scripts build",
"deploy": "set PORT=8008 && serve -s build"
}
npm start : run project for development(windows)
npm run-script build : build the production build
npm run-script deploy: run the production build
npm install -g serve before run npm run-script deploy.
1> npm install create-react-app -g
2> create-react-app Your_Apps_Name