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"
}
}
Related
I'm new to create-react-app.
I just made a fresh setup with redux and react-router-dom then pushed it to Scalingo then Heroku and both of them ends up serving the development build. My redux-logger is on and React dev tools warns that :
This page is using the development build of React. 🚧
I did not do anything to customize deployment, just pushed to production.
What am I doing wrong ?
Scalingo deployment logs :
<-- Start deployment of ***** -->
Fetching source code
Fetching deployment cache
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): unspecified (use default)
Resolving node version 8.x...
Downloading and installing node 8.15.0...
Using default npm version: 6.4.1
Resolving yarn version 1.x...
Downloading and installing yarn (1.14.0)...
Installed yarn 1.14.0
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v1.14.0
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.60s.
Running build (yarn)
yarn run v1.14.0
$ react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
161.32 KB build/static/js/2.21f749f2.chunk.js
1.15 KB build/static/js/main.e65e7a00.chunk.js
761 B build/static/js/runtime~main.fdfcfda2.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://facebook.github.io/create-react-app/docs/deployment
Done in 7.79s.
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
Build complete, shipping your container...
Waiting for your application to boot...
<-- https://*****.scalingo.io -->
package.json:
{
"name": *****,
"version": "0.1.0",
"private": true,
"dependencies": {
"#sentry/browser": "^4.5.4",
"husky": "^1.3.1",
"lint-staged": "^8.1.3",
"prettier": "^1.16.4",
"prop-types": "^15.7.1",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-redux-i18n": "^1.9.3",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --trailing-comma all --write",
"git add"
]
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
The server in Heroku will run the start script given in the file package.json. By default, when using create-react-app the start script will run the app in development mode.
In order to run the optimized application from the build folder you will need to write a server. You can use the following code for a simple server. Make sure to save it a file named server.js and place it in the root of the repository.
const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
You will need to add the following dependencies:
express
express-favicon
path
Finally, change the package.json so the start script runs the server. To keep being able to run the development mode, you can provide another script for it.
"scripts": {
"build": "react-scripts build",
"devstart": "react-scripts start",
"start": "node server.js"
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Push the changes to Heroku and your application should run properly.
You can read more about it in this article.
https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08
My working solution is just modifying the package.json to:
"scripts": {
"heroku-prebuild": "npm install -g serve",
"devstart": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"eject": "react-scripts eject",
},
With "heroku-prebuild" you can install the serve wihtout having to upload any additional code.
I added a Procfile with the correct execution command and included a prebuild step for heroku in package.json scripts:
package.json:
"scripts": {
"heroku-prebuild": "npm install -g serve", // <- NEW
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
Procfile:
web: serve -s build
I'm trying to make a multiplayer game using the Networked-Aframe library with aframe-react. The big roadblock I've run into is I can't simultaneously run:
react-scripts start
to run react and
node ./src/vendor/easyrtc-server.js
to run my server.
Maybe create a production build of my react app, then run the server?
How do I get these two working together?
My easyrtc-server.js: https://pastebin.com/PJ0UchSi
You can add new scripts to your package.json file to run different commands.
Example
{
"name": "someapp",
"version": "0.0.1",
"private": true,
"dependencies": {
// some dependecies
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"custombuild": "npm build && node ./src/vendor/easyrtc-server.js"
}
}
Then when you can run,
npm custombuild
This command will first build your app and then start your server.
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 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.
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...