How enable gatsbyjs client-only routes on heroku - 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`));
});