CODEWITHSUNDEEP
javascriptnode.jsreactjsexpressget
daniel aagentah
daniel aagentah

Reputation: 1702

Express Server - GET request returns a 404 (Not Found)

I'll cut to the chase... So I am trying to make a GET request to my server from my react (redux) app. As far as I can see, I've setup my express server correctly (a lot of my server is optimised for server side rendering)

Here is my redux action

import axios from "axios";

export function fetchTweets() {
    return function(dispatch) {
        dispatch({
            type: "FETCH_TWEETS"
        })
        axios.get("/api/articles")
            .then((response) => {
                dispatch({
                    type: "FETCH_TWEETS_FULFILLED",
                    payload: response.data
                })
            })
            .catch((err) => {
                dispatch({
                    type: "FETCH_TWEETS_REJECTED",
                    payload: err
                })
            })
    }
}

Here is my Express server

import path from 'path';
import express from 'express';
import webpack from 'webpack';
import middleware from './src/middleware';

const app = express();

//------------------------

if (process.env.NODE_ENV === 'development') {
    const config = require('./webpack.config.dev');
    const compiler = webpack(config);
    app.use(require('webpack-dev-middleware')(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath,
        stats: {
            assets: false,
            colors: true,
            version: false,
            hash: false,
            timings: false,
            chunks: false,
            chunkModules: false
        }
    }));
    app.use(require('webpack-hot-middleware')(compiler));
    app.use(express.static(path.resolve(__dirname, 'src')));
} else if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.resolve(__dirname, 'dist')));
}

app.get('*', middleware);

//---------------------------

//connect to mongo db
var db
const MongoClient = require('mongodb').MongoClient
MongoClient.connect('mongodb://###:###@ds123930.mlab.com:23930/halftimefront', (err, database) => {
    if (err) return console.log(err);
    db = database
    console.log('db connected');
})


app.get('/api/articles', (req, res) => {
        console.log("test");
    var articles = [];
    //var articles2 = [];
    db.collection('articles').find().toArray().then(result => {
        articles = articles.concat(result);
    }).then(() => {
        console.log(articles);
        res.send(articles);
    }).catch(e => {
        console.error(e);
    });
});



app.listen(3000, '0.0.0.0', (err) => {
    if (err) {
        console.error(err);
    } else {
        console.info('Listening at http://localhost:3000');
    }
});

When I make the GET request from my redux action, it returns this in my client side console

GET http://localhost:3000/api/articles 404 (Not Found)

I've searched online and cannot find a solution to my problem, to me the GET request looks right, maybe I've not set my express server up correctly?

Any help or advice is appreciated, thank you in advance!

Upvotes: 0

Views: 7310

Answers (2)

Bonanza
Bonanza

Reputation: 1621

You should change:

app.get('*', middleware);

to

app.use(middleware);

When you create routing '*' at beginning it will catch all routes. If you want to add middleware to all requests you should use app.use.

If you want to add middleware to only one request

app.get('/route', middleware1, middleware2, (req, res) => {
    res.send('route with middlewares');
})

Upvotes: 0

Vikramaditya
Vikramaditya

Reputation: 5574

Always place the '*' route after listing all other routes.

app.get('/api/articles', function() {});
app.get('*', middleware);

Upvotes: 3

Related Questions