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",
}
Related
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
I have an electron/react application which works fine in development mode, but when it comes to building and packaging it gives this error when i run yarn electron-pack
$ build -mw
/bin/sh: build: command not found
error Command failed with exit code 127.
this happened after i installed some additional packages ( the packaging before that worked fine )
this is my scripts in package.json file :
"scripts": {
"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",
"eject": "react-scripts eject",
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on
http://localhost:3000 && electron .\"",
"postinstall": "electron-builder",
"preelectron-pack": "yarn build",
"electron-pack": "build -mw"
},
and this is the devDependencies
"devDependencies": {
"#rescripts/cli": "^0.0.16",
"#rescripts/rescript-env": "^0.0.14",
"concurrently": "^6.2.0",
"electron": "^13.1.8",
"electron-builder": "^22.11.7",
"typescript": "^4.3.5",
"wait-on": "^6.0.0"
}
a temporary solution that i found is removing node modules files and run npm install
rm -rf node_modules
npm install
Getting error on deploying nestjs app on google app engine. The deployment worked fine but app is giving error
Here is the my package.json file
"main": "dist/main.js",
"engines": {
"node": ">=8.0.0"
},
"scripts": {
"prebuild": "rimraf dist",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "node ./dist/main.js",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "tslint -p tsconfig.json -c tslint.json",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json",
"build": " tsc -p tsconfig.build.json",
"gcp-build": "npm run build"
},
and this my app.yaml file
runtime: nodejs10
env: standard
I tried to see the error on gcloud console by gcloud app logs read and it gives me error in cjs/loader file
The app is working fine locally. Any reason why this is happening?
Error: Cannot find module 'src/utils'
It looks like you are using non-relative imports and using src as a root, which won't work once you have transpiled from typescript to javaScript without some extra modifications. The src directory shouldn't exist when you are in your production environment, only the dist that has your JavaScript. If you change the import to be a relative one (using .. to get tot the correct directory from where you are) it should work just fine
Any advise on how to achieve live-reloading when implementing a Chrome Extension with create-react-app? Currently I yarn run build every time there is a change.
I managed to do that using create-react-app by:
npm i npm-watch --save-dev
Then in the 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" //add this to the script
},
"watch": { //add this outside the script
"build": "src/"
}
}
I got this working with fswatch on Mac (had to brew install fswatch):
fswatch -o ~/$PATH_TO_YOUR_PROJECT/src | xargs -n1 -I{} npm run build
This will run npm run build anytime the src directory changes (which is what I was doing manually beforehand anyways)
Note: my manifest is pointing to the build directory for my popup.
I achieve live-reloading when implementing a Chrome Extension V3 with create-react-app. Whatever you change page or content script, all things is auto refresh/reload.
https://github.com/Godiswill/cra-crx-boilerplate
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...