From 731bdf1e6daae6f52d16475da7babe3f0f522bed Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Jul 2016 00:01:08 +0100 Subject: [PATCH 1/6] Provide instructions on GH Pages deploy --- scripts/build.js | 16 +++++++++++++--- scripts/init.js | 3 ++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index cfc194cace3..2ea0411be88 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -32,16 +32,26 @@ webpack(config).run(function(err, stats) { var openCommand = process.platform === 'win32' ? 'start' : 'open'; var homepagePath = require(path.resolve(relative, 'package.json')).homepage; console.log('Successfully generated a bundle in the build folder!'); - console.log(); if (homepagePath) { console.log('You can now deploy and serve it from ' + homepagePath + '.'); + console.log('For example, if you use GitHub pages:'); + console.log(); + console.log(' git checkout -B gh-pages'); + console.log(' git add -f build'); + console.log(' git commit -am "Rebuild website"'); + console.log(' git push origin :gh-pages'); + console.log(' git subtree push --prefix build origin gh-pages'); + console.log(' git checkout -'); + console.log(); } else { - console.log('You can now serve it with any static server, for example:'); + console.log('You can now serve it with any static server.'); + console.log('For example:'); + console.log(); console.log(' cd build'); console.log(' npm install -g http-server'); console.log(' hs'); console.log(' ' + openCommand + ' http://localhost:8080'); + console.log(); } - console.log(); console.log('The bundle is optimized and ready to be deployed to production.'); }); diff --git a/scripts/init.js b/scripts/init.js index 48371745416..fdcdc92cd67 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -69,13 +69,14 @@ module.exports = function(hostPath, appName, verbose) { } console.log('Success! Created ' + appName + ' at ' + hostPath + '.'); - console.log(); console.log('Inside that directory, you can run several commands:'); + console.log(); console.log(' * npm start: Starts the development server.'); console.log(' * npm run build: Bundles the app into static files for production.'); console.log(' * npm run eject: Removes this tool. If you do this, you can’t go back!'); console.log(); console.log('We suggest that you begin by typing:'); + console.log(); console.log(' cd', cdpath); console.log(' npm start'); console.log(); From 7ea052cc41c5e30f75f7b9a6bab495fbc388e907 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Jul 2016 00:15:02 +0100 Subject: [PATCH 2/6] Add docs for GH Pages deployment --- template/README.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/template/README.md b/template/README.md index 5ffc1b5a225..4d49501bca5 100644 --- a/template/README.md +++ b/template/README.md @@ -219,7 +219,7 @@ Please be advised that this is also a custom feature of Webpack. **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify. If you prefer to reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will consider support for this. -### Adding Flow +### Add Flow Flow typing is currently [not supported out of the box](https://github.com/facebookincubator/create-react-app/issues/72) with the default `.flowconfig` generated by Flow. If you run it, you might get errors like this: @@ -275,6 +275,32 @@ module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|w We will consider integrating more tightly with Flow in the future so that you don’t have to do this. +### Deploy to GitHub Pages + +First, open your `package.json` and add a `homepage` field. +It could look like this: + +```js +{ + "name": "my-app", + "homepage": "http://myusername.github.io/my-app", + // ... +} +``` + +Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages: + +```sh +git checkout -B gh-pages +git add -f build +git commit -am "Rebuild website" +git push origin :gh-pages +git subtree push --prefix build origin gh-pages +git checkout - +``` + +You may copy and paste them, or put them into a custom shell script. You may also customize for another hosting provider. + ### Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/template/README.md) From 38eba5fbc3ec35cde2380638d2a5ecea28ebd20e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Jul 2016 00:27:13 +0100 Subject: [PATCH 3/6] Prevent incorrect paths in file-loader --- config/webpack.config.prod.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 9ad5d371fed..a5c52513f2b 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -29,6 +29,10 @@ var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico'); var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build'); var homepagePath = require(path.resolve(__dirname, relativePath, 'package.json')).homepage; var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/'; +if (!publicPath.endsWith('/')) { + // Prevents incorrect paths in file-loader + publicPath += '/'; +} module.exports = { bail: true, From d8feaa380a434178faedd0151adaf2f89e37fdca Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Jul 2016 00:33:39 +0100 Subject: [PATCH 4/6] Minor message tweaks --- scripts/build.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 2ea0411be88..4bafe07bdb7 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -33,8 +33,8 @@ webpack(config).run(function(err, stats) { var homepagePath = require(path.resolve(relative, 'package.json')).homepage; console.log('Successfully generated a bundle in the build folder!'); if (homepagePath) { - console.log('You can now deploy and serve it from ' + homepagePath + '.'); - console.log('For example, if you use GitHub pages:'); + console.log('You can now deploy it to ' + homepagePath + '.'); + console.log('For example, if you use GitHub Pages:'); console.log(); console.log(' git checkout -B gh-pages'); console.log(' git add -f build'); From 10ee09c7a20e133de7b010e15fe5a56112b3b100 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Jul 2016 00:36:16 +0100 Subject: [PATCH 5/6] Update README.md --- template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template/README.md b/template/README.md index 4d49501bca5..d82ecf27242 100644 --- a/template/README.md +++ b/template/README.md @@ -299,7 +299,7 @@ git subtree push --prefix build origin gh-pages git checkout - ``` -You may copy and paste them, or put them into a custom shell script. You may also customize for another hosting provider. +You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider. ### Something Missing? From f1c27e3bf37fcca763fb79190f93bc6adb4f2d44 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Jul 2016 00:51:25 +0100 Subject: [PATCH 6/6] Fix relative paths --- scripts/build.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 4bafe07bdb7..7acb199652d 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -16,11 +16,13 @@ var config = require('../config/webpack.config.prod'); var isInNodeModules = 'node_modules' === path.basename(path.resolve(path.join(__dirname, '..', '..'))); -var relative = isInNodeModules ? '../..' : '.'; +var relative = isInNodeModules ? '../../..' : '..'; if (process.argv[2] === '--debug-template') { - relative = './template'; + relative = '../template'; } -rimrafSync(relative + '/build'); +var packageJsonPath = path.join(__dirname, relative, 'package.json'); +var buildPath = path.join(__dirname, relative, 'build'); +rimrafSync(buildPath); webpack(config).run(function(err, stats) { if (err) { @@ -30,7 +32,7 @@ webpack(config).run(function(err, stats) { } var openCommand = process.platform === 'win32' ? 'start' : 'open'; - var homepagePath = require(path.resolve(relative, 'package.json')).homepage; + var homepagePath = require(packageJsonPath).homepage; console.log('Successfully generated a bundle in the build folder!'); if (homepagePath) { console.log('You can now deploy it to ' + homepagePath + '.');