diff --git a/scripts/start.js b/scripts/start.js
index 09e3a7f9248..cf18680df06 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -74,7 +74,7 @@ function clearConsole() {
process.stdout.write('\x1bc');
}
-function setupCompiler(port) {
+function setupCompiler(port, protocol) {
// "Compiler" is a low-level interface to Webpack.
// It lets us listen to some events and provide our own custom messages.
compiler = webpack(config, handleCompile);
@@ -99,7 +99,7 @@ function setupCompiler(port) {
console.log();
console.log('The app is running at:');
console.log();
- console.log(' ' + chalk.cyan('http://localhost:' + port + '/'));
+ console.log(' ' + chalk.cyan(protocol + '://localhost:' + port + '/'));
console.log();
console.log('Note that the development build is not optimized.');
console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
@@ -150,14 +150,14 @@ function setupCompiler(port) {
});
}
-function openBrowser(port) {
+function openBrowser(port, protocol) {
if (process.platform === 'darwin') {
try {
// Try our best to reuse existing tab
// on OS X Google Chrome with AppleScript
execSync('ps cax | grep "Google Chrome"');
execSync(
- 'osascript chrome.applescript http://localhost:' + port + '/',
+ 'osascript chrome.applescript ' + protocol + '://localhost:' + port + '/',
{cwd: path.join(__dirname, 'utils'), stdio: 'ignore'}
);
return;
@@ -167,7 +167,7 @@ function openBrowser(port) {
}
// Fallback to opn
// (It will always open new tab)
- opn('http://localhost:' + port + '/');
+ opn(protocol + '://localhost:' + port + '/');
}
function addMiddleware(devServer) {
@@ -219,7 +219,7 @@ function addMiddleware(devServer) {
devServer.use(devServer.middleware);
}
-function runDevServer(port) {
+function runDevServer(port, protocol) {
var devServer = new WebpackDevServer(compiler, {
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the WebpackDevServer client so it can learn when the files were
@@ -237,7 +237,9 @@ function runDevServer(port) {
// https://github.com/facebookincubator/create-react-app/issues/293
watchOptions: {
ignored: /node_modules/
- }
+ },
+ // Enable HTTPS if the HTTPS environment variable is set to 'true'
+ https: protocol === "https" ? true : false
});
// Our custom middleware proxies requests to /index.html or a remote API.
@@ -252,13 +254,14 @@ function runDevServer(port) {
clearConsole();
console.log(chalk.cyan('Starting the development server...'));
console.log();
- openBrowser(port);
+ openBrowser(port, protocol);
});
}
function run(port) {
- setupCompiler(port);
- runDevServer(port);
+ var protocol = process.env.HTTPS === 'true' ? "https" : "http";
+ setupCompiler(port, protocol);
+ runDevServer(port, protocol);
}
// We attempt to use the default port but if it is busy, we offer the user to
diff --git a/template/README.md b/template/README.md
index cb3d1978188..0a4a1dd3353 100644
--- a/template/README.md
+++ b/template/README.md
@@ -24,6 +24,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [Integrating with a Node Backend](#integrating-with-a-node-backend)
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
+- [Using HTTPS in Development](#using-https-in-development)
- [Adding `` Tags](#adding-meta-tags)
- [Running Tests](#running-tests)
- [Filename Conventions](#filename-conventions)
@@ -526,6 +527,28 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can:
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
+## Using HTTPS in Development
+
+You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using [the "proxy" feature](#proxying-api-requests-in-development) to proxy requests to an API server when that API server is itself serving HTTPS.
+
+To do this, set the `HTTPS` environment variable to `true`, then start the dev server as usual with `npm start`:
+
+#### Windows (cmd.exe)
+
+```cmd
+set HTTPS=true&&npm start
+```
+
+(Note: the lack of whitespace is intentional.)
+
+#### Linux, OS X (Bash)
+
+```bash
+HTTPS=true npm start
+```
+
+Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
+
## Adding `` Tags
You can edit the generated `index.html` and add any tags you’d like to it. However, since Create React App doesn’t support server rendering, you might be wondering how to make `` tags dynamic and reflect the current URL.