Look for HTTPS environment variable (#430)

dceddia · gaearon · commit c22c96b20af8 · 2016-09-02T20:47:06.000+01:00
With the HTTPS env var set 'true', the dev server will serve over HTTPS.
diff --git 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, {
     // By default WebpackDevServer also serves files from the current directory.
     // This might be useful in legacy apps. However we already encourage people
@@ -254,7 +254,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.
@@ -269,13 +271,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
@@ -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 `<link>` and `<meta>` Tags](#adding-link-and-meta-tags)
   - [Referring to Static Assets from `<link href>`](#referring-to-static-assets-from-link-href)
   - [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
@@ -528,6 +529,30 @@ 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
+
+>Note: this feature is available with `react-scripts@0.4.0` and higher.
+
+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 `<link>` and `<meta>` Tags
 
 You can edit the generated `index.html` and add any tags you’d like to it.
