use folders with index.html

[konsumer]

On gitlab pages (and maybe github pages too) if I have a page that is routed at /about react-snapshot makes a about.html, which doesn't resolve to /about. It'd be neat to have an option to make about/index.html, so it routes correctly. If there is interest, I'd be happy to make a PR.

[FelixKuehl]

@konsumer I think this is probably not a problem with this library but with your react-router configuration. I do not completely remember how I did this but you can just configure react-router for example to take /about/ routes as well as /about routes which will generate /about/index.html as well. Anyways, having about.html instead of /about/index.html can make a lot of sense, when hosting on static hosting services such as AWS S3. When using /about/index.html structure you will always have the trailing slash on your websites routes, because there is no way to redirect this without getting a 302 redirect, which is not very SEO friendly. The recommended way of achieving /about to resolve to /about.html (At least for AWS S3 hosting) is to just cut away the .html. The mime type of the file is still text/html so it will work just as well without the file extension. In your build pipeline you could do something like:

for fl in $(ls  build/ --recursive | grep "\.html" | sed -e 's/^[-0-9]\{10\} [\:0-9]\{8\} * [0-9]* //');
  do mv --content-type="text/html" build/$fl build/${fl/\.html/};
done

Hope that helps as a workaround?

[konsumer]

I think this is probably not a problem with this library but with your react-router configuration. I do not completely remember how I did this but you can just configure react-router for example to take /about/ routes as well as /about routes which will generate /about/index.html as well.

When I make this route:

        <BrowserRouter>
          <Fragment>
            <Link to='/'>Home</Link>
            <Link to='/about'>About</Link>
            <Switch>
              <Route exact path='/' component={PageHome} />
              <Route exact path='/about' component={PageAbout} />
              <Route exact path='/about/' component={PageAbout} />
            </Switch>
          </Fragment>
        </BrowserRouter>

it only generates about.html. Is there a missing option somewhere? More than that, I'd rather not specify what is essentially the same route, twice.

To test out how gitlab-pages handles trailing slashes, I make this on pages. As you can see it works fine, with no redirects. In my gitlab-ci file, I just copy it manually.

I think all 3 styles would be useful (output to {name} for S3, output to {name}/index.html for gitlab and others that use index.html like this, and current style: {name}.html.) I could totally write a bash script to fix it up after, but it would be a simple PR to add the option directly, for all 3, if there is interest.

[konsumer]

I ended up just making a PR for a rudimentary template system, so you can use any style you like (including the gitlab-friendly and s3-friendly style.)

[pedroBruno7]

@konsumer Isn't that a server problem? I had that issue and solved it simply by (express node.js):

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname + '/client/build' + req.path + '.html'));
})

It just goes after the name a sends back the appropriate html file. In the req.path, in your case, you would have "/about"

In the SPA itself that should not be a issue, react router takes care of it.

[konsumer]

I don't have too much control over how gitlab and s3 serve static files. I can probly configure them both to work some other way, but my fork (in the PR) does that work in a better way, in my opinion, in that it just generates the right structure by simple config (and by default generates the old structure.) This issues is pretty old, and I stopped using this tool, in favor of other more mature & maintained stuff.

[danvoyce]

I got around this by simply doing

<Route path="/about.html" ... />

[konsumer]

@danvoyce that changes the URL, though. I still think my PR is better. It defaults to current behavior, but adds an option to output files however you like.