Our Ionic 5 / Angular app is deployed to devices (iOS and Android) and also made available on the web. On our web server we map all URLs to the /web/ subfolder so in order to get my www files deployed in a working fashion I found I had to add the baseHref setting to my angular.json file before doing the build:
app:{
architect: {
build: {
options : {
baseHref:"/web/"
}
}
}
}
However, with this setting in my angular json file my device builds no longer work. Is there an easy way for me to configure things so that I can get things working across all three platforms with a single build and without having to modify angular.json?
I guess that depends on your definition of “easy”, because what I do here seems like it might violate one of your preconditions.
1 Like
hi @rapropos I originally marked your answer as a solution but have only just got round to trying it (!) and I have found this does not fix my issue.
in the nginx config I have:
location /web {​​​​​​
alias /home/ionic/www;
try_files $uri $uri/ /index.html =404;
}​​​​​​
My application web files are all sitting in the ionic/www folder
The application is served with an initial launch url of https://servername/web
The app works ok on the devices but will only serve in the browser if I add
"baseHref": "/web/"
in my angular.json file and as I said I would like to remove this and have all builds work across all three platforms.
I looked at what you suggested in the link you posted and I assumed you meant change the alias setting and add “/web/” at the end of it but this did not work. I got an immediate page not found error when the app tried to launch.
I know nothing about nginx so may have misunderstood what you were suggesting?
Perhaps a trailing slash would help you. I use root instead of alias. See this SO question.
Hmm, yeah I tried the trailing / and I also tried root instead of alias. Neither worked for me. Thanks I will take a look at the link.
Here’s the relevant block from a running instance.
listen 443 ssl;
server_name foo.*;
root /usr/share/nginx/html/foo;
ssl_certificate /etc/letsencrypt/live/foo/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/foo/privkey.pem;
location / {
try_files $uri $uri/ /index.html =404;
}
location index.html {
add_header Cache-Control 'no-store';
}
}
Here’s the relevant bit of angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/foo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"localize": ["ja"],
"baseHref": "/",
It gets deployed via docker-compose, but long story short, the index.html ends up physically underneath /usr/share/nginx/html/foo after all is said and done.
I thought that was close enough to your situation that it would be adaptable for you. Wonder what’s different.
Thank you I will try again over the weekend. I’m wondering (having read the linked question) whether I changed the alias to root and also the slash but got the combination of the two wrong. Thanks for your help.
Still not got this to work! The two big differences as far as I can tell between your setup and mine is that in your angular.json file you have “outputPath” as “dist/foo” and mine is set to the default of “www”. And also that your server root is set to “/usr/share/nginx/html/foo;” whereas my server root is set to a completely separate path from my ionic app because the server’s main root page is an external login page (which is why I use the alias in the block of code I put in my earlier reply)
I personally would question how much time and effort you’re putting into something, just to say you can run one command, especially when you’re not sure that it’s worked.
I mean, I run these 3 commands for web, iOS and Android and it works fine and I don’t worry about it:
ionic build --prod -- --base-href /app/
ionic cordova build ios --prod --release
ionic cordova build android --prod --release
Just my opinion obviously.
Hi @Daveshirman thanks - our builds are done on AppFlow so I’m not sure if that would be an option for me
1 Like
baseHref can be set as a command line flag. Since Appflow just runs the npm run build command, you can customize the baseHref there.
"scripts": {
"build": "ng build --prod",
"buildWeb": "ng build --prod --baseHref='/web'",
},
1 Like
Oh wow - I didn’t realise that! Thanks
Mike what do I need to do to get AppFlow to use the “buildWeb” configuration when I do an AppFlow web build. I added it to my package.json and just tried a web build on Appflow but it appears to be picking up the “build” setting still - I was thinking after reading your reply that it would automatically pick up the “buildWeb” one but I expect I’m being a bit stupid!
This this case can make use of Appflow’s build env
instead of having 2 build commands.
"scripts": {
...
"build": "BUILD_ENV=${BUILD_ENV:-local} ng build --configuration=$BUILD_ENV"
...
}
Then define new entries for the build_env’s you’ve named in app flow.
"configurations": {
"production": {...},
"web": {
"baseHref": "/app",
//Copy the config from prod
},
"native": {
"baseHref": "/",
//Copy the config from prod
}
}
1 Like
Thanks, I can confirm I was definitely being stupid.