Guide to deploying a React Application to Netlify while organizing the client and server directories

I'm facing some confusion while attempting to deploy an application to Netlify that consists of both client and server folders. I initially tried running npm build on the main directory which contains both folders, but it did not yield the desired result. Subsequently, I ran npm build on the client folder separately, which successfully generated a 'dist' folder. However, upon adding the dist base directory to my deployment settings, it was unable to locate the files.

Seeking guidance on how to effectively deploy a Vite React app with separate server and client folders on Netlify.

Below is the structure of my current directory:

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
reactjsdeploymentvitenetlify

Answer №1

Choice 1: Linking a GitHub repository

  1. To connect your GitHub repository to Netlify, visit the Netlify website and click 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 are using create-react-app, the command would be npm run build.

  3. You must indicate the location of the client folder in your case, as this is where your React app resides. If your client folder is at the root of your repository, enter client in the publish directory field.

Save the settings and deploy your site.

Choice 2: Drag and drop method

  1. Access the client folder by typing cd client.
  2. Build the react app on your local machine with the command npm run build, which will generate a dist directory.
  3. Visit the Netlify website and log into your account.
  4. Click on the "New site" button, then choose the "Drag and drop" option.
  5. A dialog box will appear where you can drag and drop your site files. Netlify will handle the building and deployment process automatically.

Choice 3: Utilizing Netlify CLI

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

  2. In your React app's main directory, execute the netlify init command to set up your app for deployment. This will require you to sign in to your Netlify account and select the appropriate site for your app.

  3. Build your React app using the command npm run build or yarn build; this will create a build folder containing an optimized version of your app.

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

The deploy command will ask you to specify the directory where your app is located. You should provide the location of the build folder, which holds the optimized version of your React app.

The deploy command will also inquire about any necessary environment variables for your app.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Signing up with DJ Rest Auth

One of the challenges I'm currently facing involves using dj-rest-auth, an authentication tool specifically designed for Django. Upon user registration, a verification email is automatically sent to confirm their email address. However, I am strugglin ...

reactjsdjangonext.jsdjango-serializerdj-rest-auth

What is the best way to merge two JSON arrays using Axios in a React project?

I am currently working on getting data using axios React from Laravel, but I am facing some challenges in combining two arrays by their respective Ids. In my case, I am trying to retrieve product data and images from the Laravel Controller. Can anyone prov ...

javascriptreactjslaravel

React dynamic dropdown selection based on previous dropdown values

I have implemented 3 react input fields that are populating data to a useState Hook <FormControl fullWidth> <InputLabel>Primary Goal</InputLabel> <Select ...

javascriptreactjsmaterial-ui

Tips for including and excluding personalized Chips from input

Just started learning React/typescript, any assistance would be greatly appreciated Custom Chip (CC.chip) is a specialized Chip UI component that can be utilized as demonstrated below. const [isOpen, setIsOpen] = useState(true); const onClose = Re ...

reactjstypescript

React reducer being invoked twice

In my application, I am utilizing React and Redux. I am facing an issue where I receive my props twice - the first time as undefined and the second time correctly. This makes it impossible for me to use the props effectively. import ... class Home exte ...

reactjsredux

What causes the failure of hot reloading in the ReactJS Visual Studio 2019 template?

I have been experimenting with ReactJS on my personal and work computers. On my personal computer, I am using Visual Studio 2019, NodeJS 10.16.2, NPM 6.9.0, and webpack 3.11.0. Initially, hot reloading was functioning correctly when I started my project. ...

node.jsreactjsnpmwebpackvisual-studio-2019

A step-by-step guide on executing a callback function once the animation has finished with frame-motion

I'm facing an issue with my component called AnimatedText. After the animation is complete, I want the words filled in the underlineLines prop to be underlined. How can I achieve this? I attempted using the onAnimationEnd function, but it didn't ...

javascriptreactjsnext.jsframer-motion

Exploring the powerful capabilities of utilizing state variables within styled components

I'm attempting to create a button that changes its state based on the value of a property within an object. Below is the styled component const Btn = styled.button` border-radius: ${props => props.theme.radius}; padding:5px 10px; backgroun ...

javascriptreactjsstyled-components

Showing all elements on page load that are currently being filtered out in React

I've created a page that displays a grid of images with various details like title, description, author, and more. All this data is being pulled from my SQL table (referred to as marketplaceData). To enhance user experience, I added a search bar to f ...

javascriptreactjsonchange

Display the connected component in React Redux

I have been utilizing the connect function in React Redux to link my store to a React component. Once connected, I aim to render the component successfully. The initial setup appears like this: class Init extends React.Component { render() { return ...

reactjsreduxreact-redux

Enforcing Single Menu Accessibility in React: Only One Menu Open at a Time

Just starting out with React and JavaScript, so please bear with me for any formatting issues or lack of knowledge on best practices. I'm using Tailwind UI for my website, which includes navigation menus that require JavaScript to open and close. I h ...

javascriptreactjs

Navigating JSON data with unexpected fields in Typescript and React.js

Looking to parse a JSON string with random fields in Typescript, without prior knowledge of the field types. I want to convert the JSON string into an object with default field types, such as strings. The current parsing method is: let values = JSON.parse ...

javascriptreactjstypescript

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

javascripthtmlreactjsmaterial-uiweb-component

Tips for effectively sending prop to a component in React with the help of TypeScript

Hey there, I'm working on a component called FormField which can accept either an icon for create or edit. Currently, I am using this FormField inside another component called SelectWithFormField. Here's how it looks: const FormField = ({create, ...

reactjstypescript

Show a loading icon as the data is being fetched

I am currently facing an issue with displaying a loader icon while data is being fetched from an API. Despite my efforts, I have not been successful in showing the loader icon during the data retrieval process. My folder structure looks like this: compo ...

reactjs

Heroku, Express, React, and NodeJS - struggling with HTTPS inconsistency issue

I'm facing an issue with my express routes not working properly when deployed on Heroku. The odd thing is that the routes work fine when accessed via HTTP, but not via HTTPS. Interestingly, they do work on HTTPS with Internet Explorer and Microsoft Ed ...

node.jsreactjsexpressherokuhttps

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Currently, I am working with React and material-ui. Specifically, I am utilizing an appbar with tabs and my goal is to have the content of each tab expand to full width and height when selected. If you'd like to see an example, check out this sandbox ...

javascripthtmlcssreactjsmaterial-ui

Tallying responses of "Yes" and "No" in a React form and storing them

I'm currently working on a React form using Material UI components. To keep track of the responses, I have an empty array called questionAns. My goal is to append an element like yes to the array when the Yes radio button is selected in the form. Belo ...

javascriptreactjsarraysformsmaterial-ui

Invoke a function on React whenever the context is updated

Within my functional component, I have a scenario where it returns another function: function Lobby() { const user_context = useContext(UserContext) return ( <div>{renderData(user_context.state.data)}</div> ) } export default L ...

javascriptreactjsreact-context

Tips for maintaining the selected state of a specific menu item in Material UI select component

I am currently working with React and Material UI. When using the select component, I am trying to set a specific menu item as selected by default. For example, I would like <MenuItem value={20}>Twenty</MenuItem> to be initially selected. How ...

reactjsmaterial-ui