I want to know How to compress the .js and .css files after a normal react build. Right now I am using this script
"build": "npm run watch:css && react-scripts build",
"postbuild": "cd ./build/static && gzip *.js && gzip *.css",
to compress the files but it's showing me this error message every time when I build the app using npm run build.
build folder structure:
Anyone, please help me with this.
first: npm i gzipper -g
second: you can write these commands on package.json
"build": "react-scripts build && gzipper --verbose ./build"
then for compress, you need to use this :
"build":"react-scripts build && gzipper compress ./build"
if you want to zip CSS and js you can use :
"build": "react-scripts build && gzipper compress ./build/static/css && gzipper compress ./build/static/js",
it works for me very well :
Add compress-create-react-app npm i compress-create-react-app
Edit script in package.json
// package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && compress-cra", // <-- Edited
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Create compress-cra.json file on root folder
// compress-cra.json
{
"algorithms": ["br", "gz"],
"filetypes": [
".html",
".js",
".css",
".svg",
".png",
".jpg",
".mp3",
".wav",
".tff",
".woff2"
],
"directory": "/build"
}
Create build and check
npm run build
npx serve -s build
Related
I have a React app and I want to make the build folder its own Git repository, but every time I run npm run build, the .git folder inside the regenerated /build directory disappears. How can I resolve this?
I think you can use postbuild command in script in your package.json, which will run immediately after build. It will run automaticaly.
Example:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "copy .git .\\build\\.git"
},
In your package.json, change the build script to this:
"scripts": {
[...]
"build": "rm -rf build_old/.git && cp -R build/.git build_old/.git && react-scripts build && cp -R build_old/.git build/.git"
}
It does the following:
Deletes the build_old/.git folder (make sure to create the build_old folder first).
Copies your original .git folder to the build_old directory.
Runs react-scripts build.
Pastes the .git directory back.
I want to try the serve package with a React App by doing the following step:
npm install serve --s
then replace the npm start command in package.json like this:
scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then I run npm start i got the error in the console "Uncaught SyntaxError: Unexpected token '<'" etc
however if I uninstall serve --s and put back the package.json like this :
scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then run npm start again it work fine on my local machine, so i think i am doing something wrong in the process and i would like to know why I have issue with the serve package.
Looks like you haven't built your /build folder with app bundle. It must be like this:
npm start - to run and edit code
npm run build - to build a bundle(creates/rebuild a /build folder)
serve -s build - serve/start the /build folder
I have a react application that connect to micro services. I have different micro services urls per environment. I therefore have multiple env files: .env, .env-develoment-local, env-development,...
When I start the app locally, the app pick up the setting in the .env.development-local which is expecetd.
When I do npm run build I noticed that since it creating a production build, it picks up the .env file.
My question is how can configure the build such a way that it picks other .env files like .env.development or .env.qa, etc... ?
I was able to get this working using https://github.com/toddbluhm/env-cmd
I did the following:
npm install --save-dev env-cmd
Then updated package.json accordingly:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.env.stage npm run-script build"
}
Then run the following command:
npm run build:stage
I have downloaded following React Material template
template
Followed steps from documentation
package.json
{
"name": "material-dashboard-react",
"version": "1.6.0",
"description": "Material Dashboard React. Coded by Creative Tim",
"private": false,
"main": "dist/index.js",
"scripts": {
"start": "NODE_PATH=./src react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
}
Getting the following error
It is because you are using Windows. The project was likely ran on unix based computers before (NODE_PATH=./src is not a windows way of defining environment variables). You can either fix it by using the Windows syntax "start": "set NODE_PATH=./src react-scripts start", (your project will not run on unix machines) or use a cross-env library for defining your environment : https://www.npmjs.com/package/dotenv
For anyone wondering, I had the same issue with the same template and my solution was to configure a file in the project root as specified in this link.
I'm using docker and my working directory is in the /app directory, so I added this line in my tsconfig.json file at the root of my react app folder:
"compilerOptions": {
...,
"baseUrl": "/app/src",
}
I'm using the following environment variable in my create-react-app:
console.log(process.env.REACT_APP_API_URL) // http://localhost:5555
It works when I run npm start by reading a .env file:
REACT_APP_API_URL=http://localhost:5555
How do I set a different value like http://localhost:1234 when executing a npm run build?
This is my package.json file:
{
"name": "webapp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.9.0"
},
"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"
}
}
I imagine you got this working by now, but for anyone else that finds this, you set your default environment variables in a .env file at the root of your "create-react-app" project.
To separate out the variables used when using npm start and npm run build you can create two more env files - .env.development and .env.production.
npm start will set REACT_APP_NODE_ENV to development, and so it will automatically use the .env.development file, and npm run build sets REACT_APP_NODE_ENV to production, and so it will automatically use .env.production. Values set in these will override the values in your .env.
If you're working with other people, and have values specific to your machine only, you can override values in .env.development and .env.production by adding those values to a new file - .env.development.local and .env.production.local respectively.
EDIT: I should point out that the environment variables you have set must start with "REACT_APP_", eg. "REACT_APP_MY_ENV_VALUE".
EDIT 2: if you need more than just development, and production, use env-cmd, as specified by this comment.
You can use the process.env.NODE_ENV like so:
const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;
You would need to have REACT_APP_PROD_API_URL and REACT_APP_DEV_API_URL set.
Or, if the production URL is always the same, you could simplify it:
const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;
Create React App sets the NODE_ENV to 'production' for you on build, so you don't need to worry about when to set it to production.
Note: you must restart your server (e.g. run npm start again) to detect environment variable changes.
If you'd like to have separate dotenv files for building and/or deploying to separate environments (stage, prod) then you can use env-cmd like so:
npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build
Then just update your package.json accordingly:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.stage.env npm run-script build"
},
Then to build you'd just run this shell command:
npm run build:stage
Also, it can be done without additional dependency:
"scripts": {
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
"build:staging": "REACT_APP_ENV=staging npm run build",
"build:production": "REACT_APP_ENV=production npm run build"
},
And have .env.staging, .env.production files accordingly
install 'env-cmd' package
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build",
"start:qa": "env-cmd -f .env.qa react-scripts start",
"build:qa": "env-cmd -f .env.qa react-scripts build"
},
in local if we want to run qa environment use
npm run start:qa
If you are using Heroku for deployment, then follow this:
Go to your app settings >> click on 'Reveal Config Vars' button
Add your variables
Use them in the app in the same way as you are using previously ex. process.env.REACT_APP_VARIABLE_NAME
Re-Deploy the app
and that's it...