diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 9ad5d371fe..a5c52513f2 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, diff --git a/scripts/build.js b/scripts/build.js index cfc194cace..7acb199652 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,18 +32,28 @@ 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!'); - console.log(); if (homepagePath) { - console.log('You can now deploy and serve it from ' + homepagePath + '.'); + 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'); + 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 4837174541..fdcdc92cd6 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(); diff --git a/template/README.md b/template/README.md index 5ffc1b5a22..d82ecf2724 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 them 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)