How can I deploy my MERN stack app (Express backend & React frontend) with MVC architecture

Support
, ,
1

Hi, I am trying to deploy a MERN stack application to Netlify. It is an integrated code base where the front end and back end are in the same repo (one package.json file). From what I understand, Netlify will only deploy the frontend and the backend has to be connected with Netlify Lambda Functions.

The problem seems to be that the fetch request in (for example) videoService.js calls the route ‘api/videos’, the process breaks down because routes/api folder (from express) is not accessible in the deployed version of the site.

  • code from src/utils/videoService.js
async function getChannelVideos() {
    console.log('getChannelVideos called in videoService');
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    };
    console.log('approaching fetch in videoService');
    return fetch(`/api/videos`, options).then(res => res.json());
}

I have followed Netlify’s documentation example (in link above) by creating a functions folder and writing a function which worked when you type the endpoint into the URL but I’m completely unclear on how to apply this to my current project/issue.

  • code from newly created functions/serve.js
exports.handler = function (event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: 'Hello?'
  });
}

The closest article I have found is this one:

The very last example ‘React with Express.js —v2’
Matches my project in terms of the fact that it is an integrated code base with one package.json file.
However, I am left unclear of how to connect the Routes folder, Controllers folder and have concerns about connecting the Models folder (or database in general) after this.

I am not sure if I have to restructure my entire project… Should I move all of my Routes and Controller functions into the src directory like the examples show?

I am extremely thankful for any help!!

Samantha

2

I think we’re not really set up for a deployment like that, or to put it another way, you will likely need to rearchitect if you are porting from a dynamic webserver that runs code natively at browse time. You CAN cram express and friends into functions, but those are configured separately as described here:

I’m not much of a functions or node expert, so this answer may be useless or wrong, but hopefully you can tell me if so, so someone cleverer than me can take a look :slight_smile: