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
Related
How to run React with https in windows. I need to set both port as well as HTTPS.
Offical Facebook documentation. But it doesnt talk about setting both the port and HTTPS. hence looks like i am missing something
here is my code
"scripts": {
"start": "set PORT=3000 && HTTPS=true && react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
}
PROBLEM AND SOLUTION:
I was using vscode Powershell terminal: It wont work :(
Had to execute the npm command in windows CMD ;)
The webserver which will be run by create-react-app is only for development purposes. If you need a HTTPS version of the website, you can simply set the HTTPS environment variable to true before you execute the start script. (like as you did).
Also the port is adjustable by using the PORT environment variable (for http and https version).
It's not possible to run both versions (http and https) at the same time and it's not intended to be used as a production web server. For that please consider to use NGINX or Apache2 to serve your static assets which will be generated through npm run build.
Edit your package.json file and change the starting scripts for starting your secures domain. for example https
{
"name": "social-login",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-facebook-login": "^4.0.1",
"react-google-login": "^3.2.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "HTTPS=true react-scripts start",//updated line
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
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",
}
created my project with my app
This is the project.json file. That I have created
{
"name": "detox",
"version": "0.0.1",
"private": true,
"scripts": {
"ios": "react-native run-ios",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"test:e2e":"navicotrackapp test",
"test:e2e:build":"navicotrackapp build"
},
"dependencies": {
"react": "16.6.1",
"react-native": "0.57.7"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"react-test-renderer": "16.6.1"
},
"jest": {
"preset": "react-native"
},
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/navicotrackapp.app",
"build": "xcodebuild -project ios/navicotrackapp.xcodeproj -scheme navicotrackapp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone XR"
}
}
}
}
However. When I ran the test this was the out come:
Questions:
What did I do wrong
How do I fix it?
For those coming with yarn 127 error code problem
Take a look on https://github.com/reactstrap/reactstrap/issues/711
Most probably you just need to run in console yarn :)
Replace your scripts values with these, and try again:
"scripts": {
"ios": "react-native run-ios",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"test:e2e":"npm run test",
"test:e2e:build":"npm run build" // THIS SCRIPT WILL STILL BREAK FOR YOU
},
The last two are the important ones!
You need to prefix a script command with npm run or yarn if the script references another script in your package.json.
So instead of a script calling navicotrackapp test it would call npm run test OR yarn test.
NOTE:
In you example it looks like the terminal is failing on the script navicotrackapp build. Know that you do not have a build script defined so if you replace the script with npm run build it will still fail. You'll need to add a build script in if you want it to work!
"scripts": {
"ios": "react-native run-ios",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": // DO SOMETHING HERE!!!!,
"test:e2e":"npm run test",
"test:e2e:build":"npm run build"
},
Try below commands it works for me
$ npm install #ionic/app-scripts#latest --save-dev
$ ionic serve
Just use https://app.netlify.com/drop to deploy manually on Netlify
first run this command
npm run build
OR
yarn run build
Then drag and drop the build folder on the website above.
Try this, and please take care of the spaces.
It worked for me though. I added CI= in the capital before npm run build. Double-check if you did git add. , git commit -m "first commit" and git push -u origin before your final deployment.
I followed these tutorials:
https://pages.github.com/
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment
Right now my repo name is: username.github.io [username replaced with mine].
I am confused on what I am supposed to put on my package.json file because it conflicts with the React deploy tutorial. This is what I have right now [username replaced with mine]:
{
"name": "personal-website",
"homepage": "https://username.github.io",
"version": "0.1.0",
"private": true,
"dependencies": {
"gh-pages": "^1.0.0",
"react": "^15.6.1",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Every time I load to the username.github.io page, it only displays the README.md file and not the actual React application. My index.html file has to be in the public directory or else npm start will not load properly. Any suggestions on how to solve this?
You can use https://github.com/shinnn/gulp-gh-pages.
I use that lib myself to deploy a react application to github pages: https://github.com/madnight/githut/blob/master/gulpfile.babel.js
I do not want to add an extension to the URL after GitHub. So, I ended up using surge instead:
http://jakewiesler.com/surge-vs-github-pages-deploying-a-create-react-app-project/
It works and is very easy to use.
Help to run eslint in create react app.
I created react app with tutorial
Then I installed
babel-eslint
standard
snazzy
and then I added to script in package.json next line
"lint": "standart --verbose | snazzy"
and now I tried to run eslint with command: npm run lint
but I have an error Parsing error: Unexpected token = null
My full package.json is below
{
"name": "square_app_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "standart --verbose | snazzy"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"standard": "^10.0.2"
}
}
Please help to understand how to fix it or how to correct run eslint in my situation.
Thank you in advance.
Your spelling is off in your package.json script. It should be:
"lint": "standard --verbose | snazzy"
You also need to configure standard to use babel-eslint. Make sure to add this to your package.json.
{
"standard": {
"parser": "babel-eslint"
}
}
To run EsLint inside src folder:
./node_modules/react-scripts/node_modules/.bin/eslint src
I added this following script to scripts in package.json:
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
Recent React scripts (version 5 at least, it appears) install eslint directly, so you can add the following line to the "scripts" section of package.json:
"lint": "eslint .",
(Omitting the dot causes eslint not to do anything.)