Giter VIP home page Giter VIP logo

Comments (24)

gaearon avatar gaearon commented on March 29, 2024 6

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

from create-react-app.

vjeux avatar vjeux commented on March 29, 2024 4

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

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024 3

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.

from create-react-app.

threepointone avatar threepointone commented on March 29, 2024

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

from create-react-app.

threepointone avatar threepointone commented on March 29, 2024

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

from create-react-app.

sotojuan avatar sotojuan commented on March 29, 2024

@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.

from create-react-app.

 avatar commented on March 29, 2024

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

from create-react-app.

 avatar commented on March 29, 2024

Woah, this is growing really fast, I'll just reference a PR for this #94

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

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)

from create-react-app.

 avatar commented on March 29, 2024

Yes, indeed, @gaearon!

from create-react-app.

bdougie avatar bdougie commented on March 29, 2024

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

from create-react-app.

selfup avatar selfup commented on March 29, 2024

@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!

from create-react-app.

 avatar commented on March 29, 2024

@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?

from create-react-app.

selfup avatar selfup commented on March 29, 2024

@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

from create-react-app.

selfup avatar selfup commented on March 29, 2024

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

from create-react-app.

selfup avatar selfup commented on March 29, 2024

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?

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

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

from create-react-app.

selfup avatar selfup commented on March 29, 2024

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

from create-react-app.

mxstbr avatar mxstbr commented on March 29, 2024

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…

from create-react-app.

mxstbr avatar mxstbr commented on March 29, 2024

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

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

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?

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

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.

from create-react-app.

mxstbr avatar mxstbr commented on March 29, 2024

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

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

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.

from create-react-app.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.