How to correctly deploy an Angular Universal website to a specific path?

Viewed 595

So, I have an app that is set up to be deployed through bitbuckets pipelines to a specific path e.g “website.com/path” but when I visit the site it tries to load the files on the root path “website.com/scripts.js”, so I have to ssh on the server and change the “base” on the index.html from “/“ to “/path/“ however doing it this way manually is very redundant and even the SSR is not working correctly.

P.S the site was originally deployed on the main root path “website.com” but a senior developer just told me “your website is now on 'website.com/path' and go change the paths on the pipeline to '/path/' ”, which I did.

bitbucket pipleline:

      - npm install
      - npm run build:ssr:stage
      - scp -o StrictHostKeyChecking=no -r dist/sns-angular xxxx@15x.xxx.xx.xx:/home/sco/www/website.com/new/sns-angular-new
      - ssh -o StrictHostKeyChecking=no xxxx@15x.xxx.xx.xx "cd /home/sco/www/website.com/new  && rm -rf sns-angular && mv sns-angular-new sns-angular"

scripts:

  "scripts": {
    "ng": "ng",
    "start": "ng run sns-angular:serve-ssr",
    "build": "ng build",
    "build:ssr:stage": "ng build --deploy-url /sns-angular/ --base-href / && ng run sns-angular:server:stage",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run sns-angular:serve-ssr",
    "serve:ssr": "node dist/sns-angular/server/main.js",
    "build:ssr": "ng build --prod && ng run sns-angular:server:production",
    "prerender": "ng run sns-angular:prerender"
  }```
1 Answers

To set the base at build time, you have to adjust your --base-href in your build:ssr:stage script to e.g. --base-href /my-path.

To get SSR to work, you have to build your app with the build:ssr script (don't forget to add here your --base-href). After the build you should able to start the server with serve:ssr script which listen by default on port 4200.

Related