I have been strugling to run an ionic react application I recently created to an apache server through a sub directory.

for example, I have a XAMPP apachefriends local apache testing server and when I place the build/ directory into the htdocs folder, it gives me alot of errors because of the absolute and relative path.

So I tried to replicate the same problem using an angular application. to my surprise it worked. These are the steps I took:

Using the XAMPP server, I wated to serve my application in the following:

http://localhost/IONIC/React/TEST-COMPONENTS/blankAngular/www

Open a folder (win+e) explorer to the following path:

F:\apachefriends\xampp\htdocs\IONIC\React\TEST-COMPONENTS

 

Then open a terminal or cd to the folder where you want to create the applicaiton. for this examlpe I am going to create a blank ionic angular application

$ ionic start blankAngular blank --type=angular -capacitor --confirm --no-interactive

 

1.2 cd into the new applicaiton and Open visual code.

$ cd blankAngular

$ code .

 

2. Open package.json and add the following property after "author"

  "homepage": "/IONIC/React/TEST-COMPONENTS/blankAngular/www/",

 

3. Open angular.json add the "baseHref" after outputPath:

            "outputPath": "www",
            "baseHref": ".",

 

4. Build the www application folder

$ ionic build --prod --engine=browser

 

5. Open www/index.html and change the base url to the following:

<base href=".">

 

6. Open the url in your browser

http://localhost/IONIC/React/TEST-COMPONENTS/blankAngular/www

 

 

 

############################ ANGULAR WORKED
WORKS WITH THE FOLLOWING CONFIGURATIONS:
http://localhost/IONIC/React/TEST-COMPONENTS/blankAngular/www
www/index.html
<base href=".">

package.json
"homepage": "/IONIC/React/TEST-COMPONENTS/blankAngular/www/",


IONIC CLI COMMAND:
$ ionic build --prod --engine=browser

testing on a XAMPP apachefriends server in my local laptop
$ ionic build --prod --engine=browser


The rest are my notes:


CREATED BRAND BLANK NEW APP
BUILT:
1. WORKS OK WITH LIVE SERVER AS THE ROOT
2. DOES NOT WORK WITH XAMPP
3. gettin 404 on all inlcudes files

CHANGED: package.json outputPath
"homepage": "/IONIC/React/TEST-COMPONENTS/blankAngular/www/",

https://forum.ionicframework.com/t/serving-ionic-webapp-from-a-subfolder/171192
angular.json added after
"baseHref": "/IONIC/React/TEST-COMPONENTS/blankAngular/www",
NOT WORK:

TRIED WIH THE BROWSER OPTION IN THE OCMMAND:
https://ionicframework.com/docs/cli/commands/build
$ ionic build --prod --engine=browser

WORKS!!!
CHANGED www.index.html to:
<base href="./">


change in angular.json
"outputPath": "www",
$ ionic build --prod --engine=browser

Running A React App To A Website Sub-folder With Build Directory