How to deploy React App to Netlify with client and server folders

Question

I'm trying to deploy an app to Netlify and I'm confused how to do so with a client and server folder. I tried npm run build on the directory containing both, which didn't work. I tried npm run build on the client which worked and created a 'dist' folder. But when I added the dist base directory to my deploy settings, it said it wasn't found.

Does anyone know how to deploy a Vite React app to Netlify with a server and client folder?

Here's what my directory looks like:

MERN GAME
   client:
       dist
       node_modules
       public 
       src
       .gitignore 
       index.html
       package-lock.json
       package.json
       tsconfig.json
       tsconfig.node.json
       vite.config.ts
   server:
       node_modules
       src
   .gitignore
     

Answer 1

Option 1: Connecting a GitHub repository

1. Connect your GitHub repository to Netlify. This can be done by going to the Netlify website and clicking on the "New site from Git" button.

2. In the "Build settings" section of your Netlify site, specify the command to build your React app. For example, if you're using create-react-app, the command would be npm run build.

3. In your case, you will need to specify the location of the client folder, as this is where your React app is located. For example, if your client folder is located at the root of your repository, you would enter client in the publish directory field.

Save the settings and deploy your site.

Option 2: Drag and drop

1. Go to the client folder by using cd client.
2. Build the react app on your local machine by running the command npm run build which will generate a dist dir.
3. Go to the Netlify website and sign in to your account.
4. Click on the "New site" button, and then select the "Drag and drop" option.
5. A dialog box will appear where you can drag and drop your site's files. Netlify will automatically build and deploy your site.

Option 3: Netlify CLI

1. Install the Netlify CLI on your machine by running the command npm install netlify-cli -g or yarn global add netlify-cli.

2. In your React app's root directory, run the command netlify init to configure your app for deployment. This will prompt you to sign in to your Netlify account and select the appropriate site for your app.

3. Build your React app by running the command npm run build or yarn build, this will generate a build folder with the optimized version of your app.

4. Run the command netlify deploy to deploy your app. This command will automatically detect the build folder and upload its files to Netlify.

The deploy command will prompt you to specify the directory where your app is located. In this case, you will need to specify the location of the build folder, which should contain the optimized version of your React app.

The deploy command will also prompt you to specify the environment variables, in case your app needs them.