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

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

Woah, this is growing really fast, I'll just reference a PR for this #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: #95 (comment)

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!

@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: #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>