5

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. Does anyone can help? Thanks a lot.

Petya Naumova
  • 727
  • 2
  • 11
  • 23
  • By deploy you mean you want to push your code to your github repo? This should not be too angular specific. What exactly you are doing can you list steps? – Sergey Rudenko Oct 28 '18 at 21:52
  • I have a github repo with Ionic code. I want to create a subpage to my Github pages account in order to deploy the app as a web project. For example, my github pages account is user-account.github.io and I want to view the app as user-account.github.io/TheApp. I want to have a preview of the project in github pages. It has to compile the typescript code because these pages can contain only plain html, css and javascript. I am using ionic-cli for building the project. – Petya Naumova Oct 28 '18 at 21:58
  • I see is there specific reason you want to host your static website with Github? I personally would recommend you separate concerns and use each service that was designed for their purposes - github - code repo, use firebase hosting as easy to use and super easy to deploy static web site hosting service. See this guide: https://www.joshmorony.com/hosting-an-ionic-pwa-with-firebase-hosting/ – Sergey Rudenko Oct 29 '18 at 00:22

3 Answers3

10

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.

pfleigi
  • 186
  • 3
  • 8
6

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
Gary Großgarten
  • 1,522
  • 9
  • 8
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
Mario
  • 2,619
  • 1
  • 24
  • 22