My react folder structure is as below
I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.
Where can I find the .map files. How can I delete those files?
I cannot find a build folder.
I've tried using the below script But It cannot work in removing source maps
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false && npm run build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
just remove &&
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You have to create a .env file in your root directory (same folder as package.json) and set GENERATE_SOURCEMAP=false on a single line.
for additional configurations, you may refer to the documentation here:
https://facebook.github.io/create-react-app/docs/advanced-configuration
What I have tested and which is working is to add this code in your .env.production file or .env file
GENERATE_SOURCEMAP=false
Solution 1
Edit your package.json like below:
Windows:
"scripts": {
"start": "react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Linux:
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Solution 2 (Recommended)
This solution is not operating system dependent and works on both Linux and Windows. Just create a file called .env in the root path of your project and add the following line to it:
GENERATE_SOURCEMAP=false
For windows cmd and create-react-app + react-scripts,
You should use set and close with \" YOUR_TMP_ENV_VAR \"
See example:
"deploy:prod:hosting": "set \"GENERATE_SOURCEMAP=false\" && npm run build
this answer helped me:
How to set environment variable in React JS..?
This works for me. Hope it helps anyone.
// package.json
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
This way, it will auto delete map files during build generation.
Solution for ejected create-react-app v2.1.3.
Go to /config/webpack.config.js directory and change the following line:
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
To:
const shouldUseSourceMap = false;
And Bob is your uncle.
just add GENERATE_SOURCEMAP=false in .env
Put this one in your package.json
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
It works on Windows and Linux...
After long struggle nothing worked. Finally what worked for me is
changing sourcemap: false in webpack.config.prod.js inside nodemodules/react-script/config
hopefully it will work for you too.
Related
I have a .env file that is supposed to define sensitive variables for me. I have a package.json file that I want to expose these variables for but I'm getting an error that says the file can't be found.
Here is the .env file
REACT_APP_HTTPS=true
REACT_APP_SSL_CRT_FILE=C:\Users\techNerd\SSL\rootSSL.pem
REACT_APP_SSL_KEY_FILE=C:\Users\techNerd\SSL\rootSSL.key.pem
REACT_APP_PORT=3000
package.json file:
"scripts": {
"start":"set HTTPS=true&&set SSL_CRT_FILE={process.env.REACT_APP_SSL_CRT_FILE}&&set SSL_KEY_FILE=process.env.REACT_APP_SSL_KEY_FILE&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Here is the error that I get:
set HTTPS=true&&set SSL_CRT_FILE=process.env.REACT_APP_SSL_CRT_FILE&&set SSL_KEY_FILE=process.env.REACT_APP_SSL_KEY_FILE&&react-scripts start
You specified SSL_CRT_FILE in your env, but the file "C:\Users\techn\WebstormProjects\AuthInMern2\client\process.env.REACT_APP_SSL_CRT_FILE" can't be found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What am I doing wrong?
Since you're not using the variable inside of the React app, you can remove the REACT_APP_ from the env var name.
In .env:
SSL_CRT_FILE=C:\Users\techNerd\SSL\rootSSL.pem
package.json:
"scripts": {
"start":"set HTTPS=true&&set SSL_CRT_FILE=$(grep SSL_CRT_FILE .env | cut -d '=' -f2)
react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I have a basic react structure:
-project-root
--- node_modules
--- public
--- src
they live in /var/www/html/project-root
I have a php API at var/www/html/php-api
Our php API we use for other applications that I want to include into the build for "onsite" API usage. So my thought was to have a symlink created so that the api directory is available in the build directory when I do sudo npm run build to production. Thus enabling me to make this call axios.get('/api/v2/users') and the api directory would symlink to /var/www/html/php-api.
I have followed the docs on Node.js fs.symlink() Function, but this looks like it creates a symlink in the node filesystem only:
fs.symlink(__dirname + "\\api",
"symlinkToDir", '/var/www/html/php-api', (err) => {
if (err)
console.log(err);
else {
console.log("Symlink created");
console.log("Symlink is a directory:",
fs.statSync("symlinkToDir").isDirectory()
);
}
});
I even thought of trying to hackishly throw a shell command on the tail of the build IE:
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject && ln -s /var/www/html/php-api/ /var/www/html/project-root/build/api"
},
Am I going about this the wrong way? The only other hackish idea I can come up with is a Linux cron job that keeps that link in the build directory .. I can't bring myself to do this .. Can someone help me do this correctly?
The easiest answer I could find was to add it into the "build" portion of "scripts" in package.json
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build && ln -s /var/www/html/php-api /var/www/html/project-root/build/api",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
I'm searching all over the internet a way to add scripts in the dafault package.json made by npm init. Any help?
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
your question is not clear but if i get it right , this is an example you have to add "scripts": {} to the packages.json ( if it's not already there ) and add your scripts in it .
`
I'm trying to attach another command to yarn start. I'm not sure if it is possible but when I run command yarn start I want my react app to start and I also want to fire up my server at the same time.
What I do know is use 2 terminals one with react app directory and call on yarn start
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler>
and one with server directory (which is inside react app directory) and call on node src/index.js
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler\server>
"scripts": {
"start": "react-scripts start", // is it possible that I can say in server directory run node src/index.js here?
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
You can use concurrently
First install it
$ npm install concurrently
Then use it in your command
"scripts": {
"start": "concurrently \"yarn start-client\" \"yarn start-server\"",
"start-client": "react-scripts start",
"start-server": "cd .\server && node src/index.js"
}
You can use npm-run-all
"scripts": {
"clean": "rimraf dist",
"lint": "eslint src",
"build": "babel src -o lib"
}
npm-run-all clean lint build
Not really any code for this, essentially used this blog as reference: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/
basically, the scripts look like this
"scripts": {
"watch": "npm-watch",
"build-css": "lessc src/main.less src/index.css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"test:staged": "echo 'write some tests'",
"eject": "react-scripts eject"
}
it runs fine up until "npm start" where everything is fine up until this moment:
[nodemon] clean exit - waiting for changes before restart
? We're unable to detect target browsers.
Would you like to add the defaults to your package.json? (Y/n) n
Unrecognized input: n
Unrecognized input:
where it's this weird loop because input isn't parsing input properly or something, as in I can't even exit because it's detected as an input, so the only way to stop is to shut down the terminal
In the package.json
"browserslist": [
"defaults"
]