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.
Related
I have a basic folder structure in React by my friend. At first, I run the npm install.
Then, I run the following command to start the server. But could not work out.
Could you please help me and thanks in advance?
Below is my package.json file
{
"private": true,
"dependencies": {
"todomvc-app-css": "^2.0.0",
"todomvc-common": "^1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
*Below is my folder structure *
enter image description here
Now I am trying to run the npm run start. But it couldn't work. It says that
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"
}
}
Trying to install Blueprint: http://blueprintjs.com/docs/#blueprint.npm-installation
Have tried the manual install. Have tried installing the dependencies manually as mentioned in step 2, but I keep getting:
UNMET PEER DEPENDENCY react#16.0.0
Which makes no sense. My package.json contains "react": "^16.0.0" and I installed react using create-react-app today, so what is going on here?
package.json:
{
"name": "reactdemo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "1.0.14"
},
"dependencies": {
"#blueprintjs/core": "^1.32.0",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.0.0",
"react-transition-group": "^1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
To quote #adidahiya from BluePrint's own repo:
If you're using React 16, we're currently in an awkward in-between state where we need react-addons-css-transition group for pre-16 support, hence the peer dep warnings. They should be safe to ignore for now. Follow #866 for more updates.
See original issue ticket here, and the issue to follow here.
Hope this helps.
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
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.)