node and reactjs axios server request returning index.html file instead of json

Question

I have setup my project with a react frontend being compiled by webpack and the server running on node and express.

When I deploy to production my requests to the server are returning the index.html file in the 'dist' folder rather than the json with the data.

My webpack compiled output is at the location ./dist.

Here is the routing part of my server.js file:

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('dist'));
  const path = require('path');
  app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });
}
// Use our router configuration when we call /
app.use('/', router);

Here is part of my webpack config file:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/client/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './client/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  devServer: {
    inline: true,
    contentBase: './dist',
    port: 8080,
    proxy: { '/api/**': { target: 'http://localhost:3000', secure: false } }
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','react'], plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']}},
        {test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i, loader: 'file-loader?name=/images/[name].[ext]'},
        {test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader','resolve-url-loader']},
        {test: /\.scss$/, loaders: ['style-loader', 'css-loader','postcss-loader', 'sass-loader','resolve-url-loader']}
        ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

My request is as follows (the api route /api/chefs returns a json with user profiles (tested in development):

export function listChefs() {
  return function (dispatch) {
    axios.get('/api/chefs')
      .then((response) => {
        dispatch({
          type: LIST_CHEFS,
          payload: response.data
        });
      })
      .catch((err) => {
        errorHandler(dispatch, 'There was a problem. Please refresh and try again.');
      });
  };
}

It seems as though the call that I am making from my client using axios is actually hitting the api url that isn't being recognised and therefore is being redirected to simply server the index.html file.

Any help?

Cheers

Do you have an endpoint defined in express to handle this route? — T Porter
– T Porter, Commented Dec 4, 2017 at 16:30
Yes the endpoint api/chefs is in my chefs routes and handles this endpoint — Sachin Karia
– Sachin Karia, Commented Dec 4, 2017 at 16:31

willwoo · Accepted Answer · 2017-12-04 16:40:01Z

2

perhaps this is the offending line:

app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

becuase this catches all your requests. If you change /* to / does that fix it?

I think the request can't make it to your router because /* catches all requests and returns the index.html page.

try:

app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

answered Dec 4, 2017 at 16:40

willwoo

5603 silver badges9 bronze badges

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

2 Comments

Sachin Karia Over a year ago

Intially I was using the former code snippet here but it hasn't made a difference. I will update the code on the question to use the correct syntax.

Priest Over a year ago

After 7 hours of futile debugging, this did it for me ! Make sure you delete your "public" folder from the app before attempting this fix, otherwise, you'll keep getting redirected to the index.html inside the public folder (unless you explicitly configure the app otherwise)

T Porter · Accepted Answer · 2017-12-04 17:29:07Z

1

According to the webpack docs, you can specify the proxy setting as follows

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

Notice the "/api" rather than "/api/**".

Also, it may be worth noting that they recommend using absolute paths via path.join(__dirname, "dist") for the contentBase setting.

answered Dec 4, 2017 at 17:29

T Porter

1,2819 silver badges16 bronze badges

Collectives™ on Stack Overflow

node and reactjs axios server request returning index.html file instead of json

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related