Create-react-app: Deployment with Surge or similar

[sotojuan]

Right now I just ran the program, did npm run build, and then surge -p build. Five seconds later I can show this to others:

https://highfalutin-sofa.surge.sh

I can also customize the URL to whatever I want (if available).

I feel like this is a great feature that could be added—one command, no config deployments. Imagine you're learning React and did something cool and want to share it but have no idea what Heroku, Digital Ocean, etc. are. This did it for you!

surge can be added as a dev dependency and a deploy script can be added that would be npm run build && surge -p build.

What do you think?

[threepointone]

I +1ed, but please consider that it puts a dependency on a third party service. maybe gh-pages?

[vjeux]

So good! We've thought about adding upload to gh pages as well. Need to figure out how to integrate it with the experience.

[threepointone]

also possible - ngrok, if you don't want to 'host' elsewhere

[sotojuan]

@threepointone Very good point—Surge recently had issues with Digital Ocean taking their sites down, though the actual product and team are very good and helpful.

GitHub pages may work as well but I've actually never used them ha, I just want easy deployment :-) Whatever works.

[gaearon]

I vote for GH pages.
But we need to fix the “root URL” issue for them:

https://github.com/facebookincubator/create-react-app/blob/cb7b9583b9d2722afee9dfdac084a64cd4cb177b/config/webpack.config.prod.js#L38-L40

[ghost]

the publicPath is not needed for production, if you change the '/' for '', it will work on GitHub pages.
I don't understand quite well the black magic behind this, but is how my deployments are made.

You can check the output here:
Without publicPath specified
With publicPath

_NOTE: I'm a beginner and don't know the implications of doing this_

[ghost]

Woah, this is growing really fast, I'll just reference a PR for this https://github.com/facebookincubator/create-react-app/pull/94

[gaearon]

the publicPath is not needed for production, if you change the '/' for '', it will work on GitHub pages.

Won’t this break single page apps with client side history API routing though?
Like I describe here: https://github.com/facebookincubator/create-react-app/issues/95#issuecomment-234639120

[ghost]

Yes, indeed, @gaearon!

[bdougie]

Hey friends, I put some thought into this discussion and wrote a blog post about how to deploy this project to Netlify. I am sure the same steps can be made with surge and other things like Firebase as well.

Netlify can perform continuous deploys similar to GH pages pretty easily, app.netlify.com is React app hosted with netlify 🐶 + 🍔 = 😎

As far as the routing, we have a solution in our documentation for that here.

We do the following in a _redirects file for our project:

/* /index.html 200

[selfup]

@MrOutis

This works when not using React Router. As soon as React Router is introduced, things get strange!

As @gaearon mentioned in another issue, this has to do with browserHistory. I tried setting a basename for React Router, but still no luck.

The assets do get loaded, just nothing renders on the page.

So I guess for now this will not work as a static website with React Router.

I have been trying everything!

[ghost]

@selfup, have you tried the redirect method mentioned by @bdougie?
It's kind of dirty, and it makes me some noise how this monkey patch would be treated when the project is _ejected_.

There's also this repository explaining the "hack" https://github.com/rafrex/spa-github-pages

However, people are baking a pretty good solution right here: https://github.com/facebookincubator/create-react-app/pull/94, have you checked it?

[selfup]

@MrOutis

I will check the spa-github-pages link.

I have tried the publicPath route, but maybe I did something wrong! I'll keep at it 👍

Currently I push the build folder to gh-pages:

git subtree push --prefix build origin gh-pages

[selfup]

@MrOutis

So I used the #94 solution, and my assets are loading just fine now on gh-pages!

For the bundled css it points to: <link href="http://selfup.me/react-storage/main.cd0d88d3b4d6fca8d4afa4a741b83ee9.css"

So it knows where to grab stuff.

However, nothing is rendering. No errors in the console. Could it be my Router setup?

If this is because of the webpack build, I am wondering how to fix this.

If I do: document.getElementById('root') it returns ->

<div id="root"><!-- react-empty: 1 --></div>

[selfup]

Ok so if you remove browser history it works on gh-pages.

However, that is not the best approach (wicked looking url).

How could this work with browser history?

[gaearon]

GH pages won’t really work well with browser history (and IMO that’s fine).

[selfup]

@gaearon Agreed. Yea I mostly use gh-pages for fun. Deploying to a VPS will be fine once MVP is proven.

[gaearon]

We added support for gh pages in #94 and #162.
Please see #162 for a description of how it works, and potential improvements for other services.

[mxstbr]

I tried the Github pages deployment and the command

git push origin :gh-pages

threw an error saying

error: unable to delete 'gh-pages': remote ref does not exist
error: failed to push some refs to '[email protected]:name/repo'

Should we be including that command by default? I realize that that's absolutely fine and I can just skip it then, but not sure if others are going to realize that…

[mxstbr]

I also just noticed that it fails when using a custom subdomain with GH Pages, since then the URL is someurl.com/reponame/. With the absolute paths in the index.html that point to /main.hash.js those files don't exist since they're at someurl.com/reponame/main.hash.js

[gaearon]

I was trying to figure out a universal set of commands for replacing a remote branch but couldn't quite manage them. Maybe there's something like "delete if exists"? Subtree push doesn't seem to have a "force" option. Alternatively we could display commands that delete everything except build, move its files in the root, and do regular force push.

I'm not sure I understand your point about custom domain. How is this different from regular GH Pages? If you put homepage in config, it should infer correct public path, no?

[gaearon]

To be clear, GH Pages (regular or custom domain) would only work in master and only if you specify homepage. This is what #94 added.

[mxstbr]

Ah, that's my problem. 👍 didn't realize a fix for this was already in!

[gaearon]

If you specify homepage, we now print instructions for GH Pages deployment. I agree it would be great to integrate this directly into the tool, and I think @ForbesLindesay was planning to look into this. In the meantime I’ll close this issue because it is not very actionable if you’re not planning to directly contribute to this in form of PRs.