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.
Here is how to use angular-cli-ghpages with Ionic 4:
ionic start MyApp blank
)npm i angular-cli-ghpages --save
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.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.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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With