Comments (24)
I vote for GH pages.
But we need to fix the “root URL” issue for them:
from create-react-app.
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.
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.
I +1ed, but please consider that it puts a dependency on a third party service. maybe gh-pages?
from create-react-app.
also possible - ngrok, if you don't want to 'host' elsewhere
from create-react-app.
@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.
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.
Woah, this is growing really fast, I'll just reference a PR for this #94
from create-react-app.
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.
Yes, indeed, @gaearon!
from create-react-app.
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.
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.
@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.
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.
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.
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.
GH pages won’t really work well with browser history (and IMO that’s fine).
from create-react-app.
@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.
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.
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.
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.
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.
Ah, that's my problem. 👍 didn't realize a fix for this was already in!
from create-react-app.
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)
- Create react app HOT 1
- login issue
- my sign in not working
- HMR not working
- [email protected]
- "npx create-react-app" doesn't generate src or public folders HOT 1
- Usage override/workaround/hack with ESLint 9
- Frontend Host doesn't match the current host in the browser, so it's probably incorrect. Links in emails and file downloads from the API will not work. Click here to update. HOT 1
- [https://newsroom.spotify.com/news/](https://deezer.page.link/fCBsxrTRUZvKbLkA8) HOT 3
- react-scripts/v/5.1.0-next.14 contains multiple security vulnerabilities for inner modules
- Issue in creating react app HOT 4
- cra打包路由切换FiberRootNode会新增,webpack打包就不会 HOT 1
- Error -4048 and Error -4058 and ENOENT, HOT 1
- Des erreurs apres installation de mui sur un projet React 18.0.0 ou supérieur HOT 1
- del proyecto
- how i can run react program in vs code HOT 4
- React JS HOT 4
- @babel/plugin-proposal-private-property-in-object missing from babel-preset-react-app dependencies
- Npx create-react-app: 8 vulnerabilities (2 moderate, 6 high) in new react app HOT 1
- 不动 啊
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.