How to deploy Ionic 4 app to Github pages?

Question

I have a problem deploying Ionic 4 app to Github pages. I tried follwing a tutorial for uploading Angular app but it does not work. It keeps throwing errors of all kinds. Do

Answer 1

Just a note: For a gitlab repository (not Github) you can do this:

.gitlab-ci.yml:

pages:
 image: node:latest
 stage: deploy
 script:
  - npm install -g ionic cordova
  - npm install
  # frontend application is served at https://what-digital.gitlab.io/stemba/
  # we need to set the basePath to the sub dir
  - ionic build --prod -- --base-href="https://what-digital.gitlab.io/gitlab-pages/"
  - rm -rf public
  - mkdir public
  - cp -r www/* public
 artifacts:
  expire_in: 1 week
  paths:
  - public
 only:
  - dev

Answer 2

I'm using https://github.com/angular-schule/angular-cli-ghpages to achieve this easily.

Just add

 "scripts": {
    ...
    "gh-pages": "ng build --base-href 'https://USERNAME.github.io/REPOSITORY_NAME/' --prod && npx ngh --dir=www/"
...
  }

to your package.json.

If you want a costum domain you can add the cname flag

--cname=example.com

to the ngh command.

To build and upload your site run

npm run gh-pages

Answer 3

Here is how to use angular-cli-ghpages with Ionic 4:

1. Create your Ionic project (ionic start MyApp blank)
2. Install the plugin: npm i angular-cli-ghpages --save
3. Connect your project with your github repository.
4. Navigate in the terminal to your project directory and execute ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/, what will create the www folder, which is comparable to the dist folder for Angular. It also sets your github page domain as base href in index.html.
5. Then run the plugin: npx angular-cli-ghpages --dir=www. The flag at the end points to the www folder, where the index.html file is located that will be displayed at https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/. The plugin will create a branch called "gh-pages" in your project that contains all files which are located in your www folder.
6. As a last step you have to select the "gh-page" branch in the settings of your project (https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/settings) as a source for your github page.

You can also set different branch names if you don't want to use the default "gh-pages" name (also master is possible, but then you should keep the source files in a different branch). Just run the plugin like this: npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www.

Like Gary Großgarten suggested, you can create a script for it which makes it easier. For Ionic it would be: ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ && npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www

I was looking for a proper solution myself, credits go to Juangui Jordán's blog.