Directory structure for creating web applications using the React CLI

I have developed a react application using the react CLI. During development, it runs from the root of the web server:

http://localhost:3000

by utilizing npm start:

"start": "react-scripts start"

However, when deploying the app, I need to place it in a specific website on our IIS server, which results in the URL being:

MyApp

Although I understand that I need to adjust my react routing, I am unsure how to instruct the react start script to always function within a specific directory on a particular folder and include that in the build. Is this achievable? My goal is to run the application in development mode from the same folder where it will be deployed so that I do not need to constantly make changes. Additionally, I prefer not having to modify the react scripts.

reactjsnpmbuild

Answer №1

After some investigation, I managed to solve the issue. Within the package.json file, I specified a homepage link:

"homepage": "https://myserver/MyApp",

Following that, I made adjustments to the routing:

<Route path="/MyApp" components={App}>

Upon deploying it on IIS, everything worked flawlessly. More information can be found on the react CLI GitHub page:

Building for Relative Paths

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

Tips for integrating the react-financial-charts library into your React and JavaScript project

While exploring the react-financial-charts library, I discovered that it is written in TypeScript (TS). Despite my lack of expertise in TypeScript, I am interested in using this library in my React+JS project due to its active contributions. However, I hav ...

javascriptreactjstypescriptnpm

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

I came across discussions about this issue here and here, but unfortunately, the solutions provided didn't work for me. I'm attempting to extract parameters from the URL using req.query. In my server.js file, I've implemented the following: ...

javascriptnode.jsreactjsexpress

JavaScript node_modules import issue

I've been grappling with this issue for quite some time now. The problem lies in the malfunctioning of imports, and I cannot seem to pinpoint the exact reason behind it. Let me provide you with a few instances: In my index.html file, which is complet ...

javascriptnpmimportnode-modules

Node.js application encounters a challenge with Swagger UI requirement not being met

My Node.js application utilizes Electron v15.3.1 and includes a Swagger UI for OAS file viewing, specifically version 4.6.1. Due to a security vulnerability in the Swagger UI, I need to upgrade it. Initially, I attempted to resolve the issue by running np ...

javascriptnode.jsnpmswagger-ui

"Oops, looks like the command you're trying to run

I've successfully installed nodejs using Chris Lea's version with the following commands: sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs npm Next, I proceeded to install Yeoman, Grunt CLI, and Bowe ...

ubuntunpmyeoman

Top method for allowing non-component functions to update Redux state without the need to pass store.dispatch() as a parameter

As I work on my first ReactJS/redux project, I find myself in need of some assistance. I've developed a generic apiFetch<T>(method, params) : Promise<T> function located in api/apiClient.ts. (Although not a React component, it is indirect ...

reactjstypescriptredux

Using React's useEffect to implement a mousedown event listener

I created a modal that automatically closes when the user clicks outside of it. method one - involves passing isModalOpened to update the state only if the modal is currently open. const [isModalOpened, toggleModal] = useState(false); const ref = useRef(n ...

javascriptreactjs

Why is my controlled input of an undefined type suddenly becoming uncontrolled due to a component change?

const NewMessage = () => { const [newMessage, setNewMessage] = useState({ recipient: '', textmessage: ''}) const sendMessage = () => { fetch(`http://127.0.0.1:4000/send-text?recipient=${newMessage.recipient}& ...

reactjs

The performance of the NextJs app API is unpredictable when deployed on Vercel

After deploying my NextJs app to Vercel, I encountered a strange issue. The static pages are functioning perfectly fine, but the API part (which pulls data from an Azure SQL database using async mssql) is behaving inconsistently. Sometimes it returns the e ...

reactjsazuredockerdocker-composenext.js

Struggling with declaring generic types in TypeScript can be a challenge

Struggling with declaring the type while creating a hook named useUpdate, here's the code: type CallBack<T extends readonly any[]> = ( ...args: T ) => void | (() => void | undefined); function useUpdate<T extends readonly any[]>( ...

reactjstypescriptreact-hooks

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

navigator.mediaDevices.getDisplayMedia({ audio: false, video: true }).then(gotMedia).catch(function(e) { console.log('getDisplayMedia() error: ', e); }); Triggering the above code will result in a popup like this. There is anoth ...

javascripthtmlreactjs

Implementing OAuth2 in a Microservices architecture to establish a user account

In my current setup, I am utilizing a React Application along with a separate Express API. My goal is to allow users to register through my React app. To do this, I believe the oauth2 flows should follow these steps: Prompt the user for information (suc ...

javascriptnode.jsreactjsexpressoauth-2.0

Quickly organize your files by placing them into individual folders for each entry

Currently in my project, I am utilizing Vite, Vue3 and TypeScript You can view the structure of my next project here I aim to organize each index.html file, along with its style, script, and assets into separate folders based on input entry Upon runnin ...

vue.jsbuildvite

Prevent EACCES issues with npm/node when using Ubuntu?

Setting up the system environment $ lsb_release -a 2> /dev/null | grep Desc Description: Ubuntu 14.04.1 LTS $ sudo apt-get install build-essential $ sudo add-apt-repository ppa:chris-lea/node.js && sudo apt-get update $ sudo apt-get install ...

node.jsubuntunpmsudonode-modules

What is the reasoning behind Meteor's decision to utilize its proprietary Package Manager Atmosphere instead of npm?

Even though Meteor is built on pure JavaScript, it diverges from the standard practice of using CommonJS modules or NPM packages by introducing its own unique package manager called Atmosphere. What led to this decision? ...

meteornpm

Managing two package.json files in a React project: best practices

After creating a React application in a folder using Node.js and npm, two sets of package.json and package-lock.json files were generated - one for the React app and another after installing react router dom. The additional set of files now exists above th ...

node.jsnpm

What steps should I take to successfully install using npm if I keep encountering the same error?

Every time I attempt to install a package using npm, I encounter the following warning: npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7b3aeaba2b3be ...

javascriptnode.jsubuntunpm

Best method for distributing components across nextjs zones?

Scenario: I am currently working on a project using Next.js and taking advantage of its multi zones feature. This feature allows us to run multiple independent NextJS applications as a unified app, managed by different teams. The Issue: One challenge I fa ...

javascriptreactjsnext.jsmicro-frontend

The subcategory was not factored into my npm package

In my npm module 'ldap-pool', I'm facing an issue where the '@types/ldapjs' package, which is a dependency along with 'ldapjs', does not get installed when I add 'ldap-pool' to another project. This particular s ...

node.jstypescriptnpmtypescript2.0ldapjs

Next.js - Reconstructing exclusively fresh sections

I'm currently working on developing a website that will only update two pages and create one new page daily. To achieve this, I need to utilize an API route in a NodeJs backend for creating the new page and updating content through an API to update th ...

node.jsreactjsreduxnext.js