How to deploy a react-redux-vite app that has express backend to netlify

Support
, ,
1

I am working on an app that is built with React, Redux, Vite in the frontend and Express in the backend. The frontend makes requests to the backend for fetching an access token, user-details and data from the reddit API. Currently, I try to deploy it with Netlify with serverless functions, but no matter what I try, I can’t make it work and I hope someone here can give me guidance and/or some help.

My folder structure is as follows:

root-folder/
├── .netlify
├── client/
│   ├── .netlify/
│   ├── coverage/
│   ├── dist/
│   ├── node_modules/
│   ├── public/
│   ├── server/
│   │   └── functions/
│   ├── src/
│   │   ├── file1.ext
│   │   └── file2.ext
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   └── vite.config.js
├── node_modules
├── server/
│   │   ├── netlify/ 
│   │   │   └── functions/ 
│   │   │	 	└── api.js
│   │   ├── routes/
│   │   ├── auth.js
│   │   ├── logout.js
│   │   ├── token.js
│   │   └── refreshToken.js
│   ├── package-lock.json
│   └── package.json
├── .gitignore
├── netlify.toml
├── package-lock.json
├── package.json
└── README.md

So, whilst I wrote my folder structure, I encountered that Netlify must have created a server-folder into the client-folder. Until now, I tried to implement everything in the server-folder that I used for the local deployment. Was this wrong? Do I have to bring everything into the client-folder? Or is there any way to keep the cuntions in the server and maybe deploy from the root folder? Personally, I think it is clearer in structure.

My server/functions/api.js look like this:

import express, { Router } from "express";
import serverless from "serverless-http";
import dotenv from "dotenv";
import cors from "cors";

dotenv.config();

const api = express();

const origin = ['my.netlify.app']

const corsOptions = {
  origin: origin,
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization"],

};

console.log(corsOptions)

api.use(cors(corsOptions)); // Use CORS middleware
api.use(express.json()); // Parse JSON bodies

const authRoute = require("../../routes/Auth");
const tokenRoute = require("../../routes/Token");
const logoutRoute = require("../../routes/Logout");
const refreshTokenRoute = require("../../routes/RefreshToken");

api.use("/auth", authRoute);
api.use("/token", tokenRoute);
api.use("/refreshToken", refreshTokenRoute);
api.use("/logout", logoutRoute);

// Test route
const router = Router();
router.get("/hello", (req, res) => res.send("Hello World!"));
api.use("/api/", router);

// Export the handler for Netlify
export const handler = serverless(api);

My netlify.toml is:

[functions]
  directory = "server/netlify/functions" 
  external_node_modules = ["express", "dotenv"]
  node_bundler = "esbuild"
[build]
  base = "client"                
  publish = "dist"                
  command = "npm run build"      
[[redirects]]
  force = true
  from = "/api/*"
  status = 200
  to = "server/netlify/functions"

And my vite.config.js:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [
    react(),
  ],
  test: {
    environment: 'jsdom', 
    globals: true, 
    setupFiles: './src/__tests__/setup.js',// inclides the setup testfile 
  }
});

If it is possible to deploy from the root folder, what do i have to change in those files (and maybe in some others)? And how would the deploy settings look like on the netlify dashboard?

I also read somewhere in the forum, that you need to create a _redirects file inside the public folder of client. Would this also apply here?

2

Have you tried to give this a read: Express on Netlify | Netlify Docs?

3

Dear hrishikesh,

thank you for your reply and suggestions. I have read the documentations, but I dont know/ well it is not clear to me where in my folder structure I have to install/include the following steps:

npm i express serverless-http @netlify/functions @types/express

Inside the root-directory or in the server-directory?

create the functions file

Inside the server-directory or the client-directory?

Regarding my setup, this is true: If your Express project uses JavaScript, you can exclude @netlify/functions and @types/express. So this means i only do the following, right?:

npm i express serverless-http

But if i do the prior steps as it is told, than i dont know why the redirects in the toml file still has the path:

to = "/.netlify/functions/api/:splat"

And where shold I call the following command?:

netlify init

Inside the root, the client or the server?

How do i then have to set up the build and deploy configuartions?

I know these are a lot of questions. And I would be very glad if you, or maybe someone else here, could help to clearify/explain the process to me.