How enable gatsbyjs client-only routes on heroku

Question

I have a gatsbyjs app with client-only routes that works fine locally but in production I can only access those routes when following a link but when typing the url directly in the browser i get a 404.

I had expected following the answer in this thread, but issue persists. Any hints or suggestions?

// app.json
{
    "name": "User Resource",
    "repository": "https://github.com/guanacone/fullstack_app",
    "stack": "container",
    "buildpacks": [
        {
            "url": "heroku/nodejs"
        },
        {
            "url": "https://github.com/heroku/heroku-buildpack-static"
        }
    ]
}

//static.json
{
    "root": "public/",
    "clean_urls": true,
    "routes": {
        "/user/**": "user/index.html"
    }
}

// gatsby-config.js
module.exports = {
  /* Your site config here */
  plugins: [
    'gatsby-plugin-layout',
    {
      resolve: 'gatsby-plugin-create-client-paths',
      options: { prefixes: ['/user/*'] },
    },
    'gatsby-plugin-styled-components',
    'gatsby-plugin-use-query-params',
  ],
};

// src/pages/user.js
import React from 'react';
import { Router } from '@reach/router';
import UserIndex from '../components/UserIndex';
import UserProfile from '../components/UserProfile';
import UserNew from '../components/UserNew';
import UserEdit from '../components/UserEdit';
import UserActivation from '../components/UserActivation';

const User = () => (
  <Router basepath='/user'>
    <UserIndex path='/' />
    <UserProfile path='/:id' />
    <UserNew path='/new' />
    <UserEdit path='/:id/edit' />
    <UserActivation path='/activation' />
  </Router>
);

export default User;

Answer 1

I solved it by removing the heroku-buildpack-static and adding the following code to my express.js server.

app.get('/user/**', (req, res) => {
  res.sendFile(path.join(`${__dirname}/public/user/index.html`));
});