2

So I have made a react-app using es6 and jsx. I have a whole components folder and a bunch of css files which I import individually in different components. I also have an index.js file outside the components that imports react-router and has a whole bunch of routing.

I made my app using create-react-app, now I cant find a good tutorial on how to generate a static website. I figured I have to use webpack but apparently create-react-app already has webpack built in, so I'm not so sure where to go from here.

Improve this question
6
  • 1
    This question doesn't make sense. What does your app do now if it doesn't create a static website? Surely that would have been the key requirement in building the app in the first place. And a whole components folder of what? Components you've written to create a static website? Your question is very very unclear. Commented Aug 27, 2017 at 13:59
  • @Andy sorry I'm a beginner but Ill try to explain it a little bit better. To run my app I have to go and run 'yarn start' everytime to launch my react-app, and that puts it on like localhost:8000. I'd rather it not do that, I want to view my website statically(like when I open up index.html I can view it or when I put it on github pages, it can run just fine). Also building my app with yarn(yarn build) and then serving it doesnt work well with react-router, since the routes dont work if I refresh the page. Commented Aug 27, 2017 at 14:01
  • React is for building dynamic sites. If you want to host your site on Github pages, you'll need to build a static site with something like Jekyll. Commented Aug 27, 2017 at 14:25
  • No I don't think so. CRA builds are meant to be deployed from a server, from a simple static web server to a node production server. If your site is simple (no gfx, routing) you might be able to get away with editing the path names in the index.html file (/static/bundle to static/bundle), otherwise I don't think it will work properly. Commented Aug 27, 2017 at 14:26
  • Okay thank you, good thing I know better now, I'll just have to use gatsbyJS if I want to build a full on static site with react I guess. Hopefully I can get the app to run with electron, would have been cool if I got ti to work with github pages aswell Commented Aug 27, 2017 at 14:32

2 Answers 2

Reset to default
5

GatsbyJS is a great static site generator, but I think it is possible to just use create-react-app to produce a build that can be put on a static server. Read the create-react-app documentation about serving apps with client-side-routing

Normally yarn build produces a build directory which contains everything you need to put on a (static) webserver.

There is however a problem when you use React Router with browserHistory. A static file server doesn't know how to handle requests for specific pages and hand them over to react router.

You can however use React Router with hashHistory. Use this when you set up ReactRouter: 

 <Router history={hashHistory}>

It will add # strings (hash strings) at the end of your URLs. The router uses the information contained in the string to render the correct components for the particular page that is requested. That way your server doesn't need any configuration and you can just use a static server.

Here is some info on the difference between browser history (nice looking url's) and hash history (# sign in the url)

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

If using Netlify, add a _redirects file in your public folder and paste this inside: /* /index.html 200
0

I had the same issue, but I found a solution:

1º Add the homepage propertity at your package.json with the value ".", like (I found it at this medium article: enter link description here): enter image description here

2º I had to change my routing from BrowserRouter to HashRouter, and set the basename attribute with the value of process.env.PUBLIC_URL at my routing, like (font: chatgpt): enter image description here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.