What is the process for deploying a React project located in a subdirectory of the main branch to Github Pages?

Currently, the project repository is structured like this: main:

  • app/
  • README.md
  • preview.jpg

The app directory contains all the necessary files and folders for my react project. I am facing an issue with getting Github Pages to work properly with the sub-directory so that when accessing the Github Pages link, the app should display correctly. At the moment, all I see is a blank page.

In my Package.json file, I have the following configuration:

{ ... "homepage": "http://myUserName.github.io/name-of-the-app", ... }

Can anyone offer assistance with this matter?

I have attempted setting the deployment branch to /docs instead of /root in the gh-pages settings, but it did not resolve the issue. I am unsure of what other steps to take.

Answer №1

  1. To publish your React app on GitHub Pages, follow these steps:
  2. Update the "homepage" URL in your package.json file to "http://myUserName.github.io/name-of-the-app/app".
  3. In the main index.js (or index.tsx) file of your project, include basename="/name-of-the-app/app" in the Router component.
  4. After building your React app, rename the build folder to "docs".
  5. Commit and push these changes to your GitHub repository.
  6. In GitHub Pages settings, specify "Source" as the "main" branch and the "docs" folder.
  7. You can now access your app at .

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

Guide to applying conditional styling to Material-UI TextField

After creating a custom MUI TextField, I implemented the following styling: const CustomDisableInput = styled(TextField)(() => ({ ".MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "#000", color: "#00 ...

React functional component fails to update upon form submission

I am currently working on developing a functional component using Redux hooks that allows the user to edit a note. Everything appears to be functioning correctly, but when I submit the form with changes, it reloads itself without any updates being made. It ...

What could be the reason behind the error related to react-router-dom?

index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.S ...

What are the steps for retrieving data on the server side by utilizing a token stored in localStorage?

Currently, I am diving into the official documentation for Next.js and utilizing the App router. On the data fetching patterns page, it explicitly states: Whenever possible, we recommend fetching data on the server To adhere to this recommendation, I cr ...

Using capital letters with interpolated language keys

The issue: I'm currently facing a problem with i18next. It allows variable interpolation in strings, like "AddNew": "Add new {{item}}". However, I have a language where the grammar requires "{{item}}" to be the first word, as in "AddNew": "{{item}} t ...

Guide on incorporating a personalized search function for individual columns in a React material table using remote data

Is there a way to create a custom search filter for each column in my material-table data using React? https://i.stack.imgur.com/xQsyf.png I want the search filter in material-table to call my Django Rest API's search function with the submitted data ...

Optimal strategy for modifying the MUI Drawer's content

I'm brand new to React and I'm trying to figure out the most effective way to create a simple transition of body content using React + MUI + Drawer. The code snippet below is completely incorrect and just for demonstration purposes: return ( ...

Tips for displaying Next.js dynamic paths on a static S3/CloudFront website

Help Needed with Next.js Setup on S3 and CloudFront While setting up Next.js with static website hosting on S3 and CloudFront, I have encountered an issue with dynamic routes. My directory structure is as follows: pages/ index.js about.js [id].js A ...

React Native encounters issues with removing the reference to the callback attribute upon unmounting

Utilizing a component that I place in an array (of various sizes) and controlling individual components through refs, while adding refs to an object to keep track of each separately. constructor(props){ super(props); this.stamps = []; this.get ...

Discovering the process of mapping transitions in MUI

I'm struggling with mapping my products in mui and placing each one in Grow. However, I keep getting this error message: "Warning: Failed prop type: Invalid prop children of type array supplied to ForwardRef(Grow), expect a single ReactElement". Can a ...

Tips for waiting for a page to load in Selenium using Java

I am currently seeking a method to delay page execution until all elements have been fully updated. An example scenario would be waiting for a screen value to change after clicking a button, thus ensuring that the new value has been displayed. My objectiv ...

The Next.js Image component is not compatible with an external URL as the image source

I've been struggling to use the image component in Next.js with an external URL as the source, but I keep encountering an error. I followed the instructions in the official Next.js documentation and updated the next.config.js file, but unfortunately, ...

Encountering a missing semicolon error while attempting to dynamically define props in React

I'm currently working with apexcharts to generate a chart. My goal is to define the chart items using props, and I am attempting to use a prop like this: series = {[{}]}. The series prop is expected to be an array, where each element in the array is ...

The functionality of the React onClick event seems to be malfunctioning specifically when used in conjunction

I've been working on incorporating a dropdown menu using React. The <Dropdown></Dropdown> element is embedded within the component's return(). <Dropdown> <Dropdown.Toggle className="btn btn-dark"> < ...

Error message encountered when using React Hook Form: "Unable to display errors due to TypeError - cannot read properties of undefined, specifically 'name'"

I'm facing an issue with React Hook Form v7 where it fails to recognize error messages, resulting in the following error: TypeError: Cannot read properties of undefined (reading 'name') for every input field. It seems like the form doesn&ap ...

The issue of focus being lost with HOC and Formik

In my latest project, I developed a bootstrap form input component that utilizes HOC (Higher Order Component) to change an icon upon submission. The input validation is done through the Formik library. <InputUi placeholder="Enter your email" ...

Deploying a ReactJS application on AWS Elastic Compute Cloud (EC2) with a wildcard SSL

After developing a reactjs app with a .net core web API as the backend, I successfully hosted it on a Windows server using IIS with http. However, when attempting to use a wildcard SSL certificate, an error appeared in the Chrome console: "Failed to loa ...

Having difficulty implementing color alternation in Material UI Datagrid v5 using Reactjs

I have been attempting to implement alternate row coloring in my Material UI datagrid (one row in blue, the other in white) but have been unable to achieve this. I am currently utilizing Material UI v5 for ReactJS. Table.js import * as React from "re ...

Guide to retrieving a value from a field and transferring it to a FieldArray value using the Push event in Redux-Form V6-RC3

I am working on a FieldArray component that displays telephone information. Users have the ability to add a telephone object which includes a number field, a type field, and a button to add the phone to the phone list (FieldArray). Within the Phone List c ...

The image is now visible on the screen when utilizing the Material UI <Image> properties

I recently added the mui-image package to my React project and incorporated it as a component using <Image>. However, I encountered an issue where my PNG image (as well as SVG images) did not appear on the screen. Strangely, when I used a random inte ...