So I'm trying to deploy my flutter web app using GitHub pages, but I'm facing a weird issue. So I have my portfolio on imgkl.github.io and I'm trying to deploy another app called fl_catalogue which has the URL, imgkl.github.io/fl_catalogue/. But when I try to go to the fl_catalogue app, it takes me to my portfolio.
I'm deploying the site, using this workflow.
name: Flutter Web
on:
push:
branches:
- master
jobs:
build:
name: Build Web
env:
my_secret: ${{secrets.commit_secret}}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- uses: subosito/flutter-action#v1
with:
channel: 'beta'
- run: flutter config --enable-web
- run: flutter pub get
- run: flutter build web --release
- run: |
cd build/web
git init
git config --global user.email my_email
git config --global user.name Imgkl
git status
git remote add origin https://${{secrets.commit_secret}}#github.com/Imgkl/fl_catalogue.git
git checkout -b gh-pages
git add --all
git commit -m "update"
git push origin gh-pages -f
You probably did not change the base path in web/index.html
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
Related
I have a Flutter web app and I'm not much familiar with GitHub workflows. I have a dotenv file that stores a token needed by another file in the project.
For the deployments, I'm using this build command in Netlify:
if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
One more reason why I chose to use this instead of a GitHub workflow is because this doesn't add the build directory in my repo itself.
Now a need has arised to use this dotenv in my project. But to build and deploy this using the aforementioned command, the dotenv should always be version controlled. Otherwise Netlify won't be able to detect it.
I have come across this stackoverflow post but this doesn't seem to solve my problem.
Is there any way I can directly pass the environment secrets to Netlify needed for build and deploy for Flutter? Or is there any workflow to directly deploy (on push) to Netlify, without storing the build files in my repo?
This is my current netlify build settings:
You can simply put your build files onto another branch using GitHub workflows.
First create a empty branch named build and initiate the branch using an empty commit. Follow these steps:
git checkout --orphan build
git rm -rf . This removes existing files
git commit --allow-empty -m "some message"
Now come back to the master branch. And run these steps:
base64 path/to/dontenv and copy the output of this command. This actually decodes the contents of your DOTENV into a string.
Paste this output in a new GitHub repo project secret and name it DOTENV.
Now simply add this DOTENV in .gitignore.
Create a new GitHub workflow.
Run mkdir -p .github/workflows.
nano .github/workflows/build.yml and paste this:
name: Build and Deploy
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout#v2
#I am assuming your dontenv was in lib/
#This now decodes your dotenv back and writes the contents into lib/dotenv
- run: echo "${DOTENV// /}" | base64 -d > lib/dotenv
env:
MAIN: ${{ secrets.DOTENV }}
- name: Set up Flutter
uses: subosito/flutter-action#v1
with:
channel: 'stable'
- name: Get dependencies
run: flutter pub get
- name: Run analyze
run: flutter analyze .
- name: Build release
run: flutter build web --release
- name: Upload artifacts
uses: actions/upload-artifact#v1
with:
name: build
path: build
deploy-build:
needs: build
runs-on: ubuntu-latest
steps:
- name: Clone the repoitory
uses: actions/checkout#v2
with:
ref: build
- name: Configure git
run: |
git config --global user.email ${GITHUB_ACTOR}#gmail.com
git config --global user.name ${GITHUB_ACTOR}
- name: Download website build
uses: actions/download-artifact#v1
with:
name: build
path: build
- name: Commit and Push
run: |
if [ $(git status --porcelain=v1 2>/dev/null | wc -l) != "0" ] ; then
git add -f build
git commit -m "gh-actions deployed a new build"
git push --force https://github.com/${GITHUB_REPOSITORY}.git HEAD:build
fi
This will create the build files in the build branch. And your master branch will remain unaffected. After every push, this GitHub action will get triggered and build and commit your build files in the build branch. To deploy, simply deploy this build branch.
This is my github action workflow.
name: Release
on:
push:
branches:
- main
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
with:
persist-credentials: false
- name: Setup java
uses: actions/setup-java#v1
with:
java-version: 11
- name: Setup node
uses: actions/setup-node#v1
with:
node-version: "14.x"
cache: npm
- name: Install dependencies
run: npm ci
- name: Build package
run: npm run build --if-present
- name: Semantic release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
HUSKY: 0
run: chmod +x script/prepare-release.sh && npx semantic-release
However, my workflow fails with the following error log.
[semantic-release] › ✖ An error occurred while running semantic-release: Error: Command failed with exit code 1: git push --tags https://x-access-token:[secure]#github.com/didrlgus/convention-template.git HEAD:main
remote: error: GH006: Protected branch update failed for refs/heads/main.
remote: error: At least 1 approving review is required by reviewers with write access.
Maybe it's because my main branch is a protected branch.
How can I push with a protected branch on github action?
There is a workaround. Steps as follows:
Create new Github user eg. my-org-bot
Generate Personal Access Token for this user on https://github.com/settings/tokens and save it somewhere (select repo scope for the token)
Go to your repo and add my-org-bot to contributors
Open your branch protection rules and add my-org-bot to the rule below:
Go to repository secrets and add new secret for Actions with key =BOT_ACCESS_TOKEN and the value = Personal Access Token generated previously
Modify your GH Workflow Checkout step with below:
Now your workflow should be able to push directly to your protected branch on behalf of my-org-bot user.
The solution that works for us is as follows:
name: Version and Package Repo
on:
push:
branches: [ master, main ]
jobs:
build:
if: github.event.commits[0].author.name != 'GitHubActions'
runs-on: ubuntu-18.04
steps:
- name: Checkout repo
uses: actions/checkout#v2
with:
fetch-depth: 0
token: ${{ secrets.PAT }}
- name: Configure git
run: |
git config user.name "GitHubActions"
git config user.email "<>"
- name: Install NPM Packages
run: npm install
env:
NODE_AUTH_TOKEN: $\{{ secrets.PAT }}
- name: Version and Package
run: npm version patch --force
env:
NODE_AUTH_TOKEN: $\{{ secrets.PAT }}
- name: Update git
run: |
git push
git push --tags
This runs on all pushes to master and main branches (we use the same script on multiple repos) and it:
checks the repo out
configures git
installs and then versions some NPM packages (not relevant to this issue, aside from the job making some kind of change to the repo) - this creates a new commit
pushes the changes back to the same branch
secrets.PAT is a personal access token of a user with admin rights and the repo has branch protection on, but excludes admins.
It is worth considering that if you run git push from an action with the on push trigger and you're using a PAT rather than GITHUB_TOKEN, then the action will run in a loop. If you are using GITHUB_TOKEN then GitHub Actions prevents the action running again automatically. We use the conditional if line at the top of the job to prevent the job running if the author name of the last commit is GitHubActions. This is the author name set in the Configure git stage, so the commits that happen within this job (as a result of npm version patch) are from an author with this name.
If the author variable doesn't work for you, there are plenty of others you can use:
https://docs.github.com/en/actions/learn-github-actions/contexts#github-context
https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#push
The downside of this approach is that you always get a second run appear in your list of actions which is immediately skipped.
I couldn’t find a solution that was acceptable to me/work. So, the only option I was left with was avoiding updates in CI that need to be pushed up. That means versioning and changelogs have to be done as part of a user commit/PR. And I created some tooling it make sure it’s done right, in case it helps anyone else: https://github.com/Shakeskeyboarde/anglerci
Hi i created a repository with the same name of my github account called mortezasabihi. and in this repository i pushed my personal website (nuxtjs static) to it and created github action for autodeployment, but I don't know why my github page URL is this:
I want to be https://mortezasabihi.github.io.
this is my gh action:
name: cd
on: [push, pull_request]
jobs:
cd:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node: [14]
steps:
- name: Checkout
uses: actions/checkout#master
- name: Setup node env
uses: actions/setup-node#v2.1.2
with:
node-version: ${{ matrix.node }}
- name: Install dependencies
run: yarn
- name: Generate
run: yarn run generate
- name: Deploy
uses: peaceiris/actions-gh-pages#v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
what's wrong? I didn't understand!
The own action-gh-pages documentation allows you to configure many things inside your workflow file.
You can have one site published to https://<username>.github.io by publishing to the master (or main) branch of a repository named “username.github.io” (substituting your actual username), as explained here.
You can also have an additional site per GitHub project published to https://<username>.github.io/<project> (which seems to be what you did here using your username profile repository).
Project sites will publish whatever you push to the gh-pages branch by default, but you can change the publishing source in the repository settings.
Another description is available in the GitHub Pages documentation, including options for using custom domain names.
I have my personal website on Github pages too, and use this strategy:
I create a branch named development and working on that branch.
Based on Nuxt documentation, I add some script in my package.json file:
"scripts": {
"dev": "nuxt",
"generate": "nuxt generate",
"start": "nuxt start",
"deploy": "push-dir --dir=dist --branch=master --cleanup"
},
and when running these commands, the dist folder automatically will be pushed to master.
npm run generate
npm run deploy
I have an Angular application, source code stored on GitHub. I want to create this pipeline to deploy the code:
On push anything into the deploy-test branch, it starts the workflow.
GitHub will create a runner
Runner pull the code
Runner start build process
Runner create a new git branch, called deploy-test-build
Runner push the built files to GitHub repository.
The self-hosted runner watch the pushes on deploy-test-build branch, it starts another workflow.
Here is my first action file:
name: Build test
on:
push:
branches:
- deploy-test
jobs:
build:
name: Build and Test
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
with:
ref: deploy-test
- name: Use Node 12.x
uses: actions/setup-node#v1
with:
node-version: '12.x'
- name: Install dependencies
run: |
cd angular
npm ci
- name: Build
run: cd angular && npm run build:ci:test
- name: Publish build
run: |
git config --global user.email "my email"
git config --global user.name my name"
git checkout -b deploy-test-build
git add --force angular/dist
git commit -m "latest build"
git push --force origin deploy-test-build
This has this output on last step:
Run git config --global user.email "my email"
Switched to a new branch 'deploy-test-build'
[deploy-test-build d3fce92] latest build
9 files changed, 1485 insertions(+)
create mode 100644 dist/3rdpartylicenses.txt
create mode 100644 dist/favicon.ico
create mode 100644 dist/index.html
create mode 100644 dist/main.0ac5b66d2bf9e9e9e7ab.js
create mode 100644 dist/polyfills-es5.71ee1b4bd0370b429e7d.js
create mode 100644 dist/polyfills.22c48ffe45b9a56d0593.js
create mode 100644 dist/runtime.eba877d1204fd67b69cb.js
create mode 100644 dist/scripts.7a55fdf6a96cbe55ae9f.js
create mode 100644 dist/styles.18a91683a46b36a985e8.js
To https://github.com/myrepos-name
+ 4298d17...d3fce92 deploy-test-build -> deploy-test-build (forced update)
And the next one:
name: Deploy to test server
on:
push:
branches:
- deploy-test-build
jobs:
prepare:
name: Prepare to clone a new version
runs-on: self-hosted
steps:
# ...
But this last workflow called Deploy to test server not started.
Any idea how can I fix it?
I have a Travis CI project connected to GitHub that tries to update content in the Github repo and push them back to GitHub, both master and gh-pages branches.
However, although my travis-ci log files says everything is ok, I only see the gh-pages branch updated, but not the master branch.
My travis.yml file is:
language: node_js
node_js: stable
language: python
python: 3.6
# Travis-CI Caching
cache:
directories:
- node_modules
- pip
# S: Build Lifecycle
install:
- npm install
- npm install -g gulp
- python -m pip install requests
- python -m pip install bs4
- python -m pip install lxml
before_script:
- cd archive_builder
- python build_archive.py
- cd ..
script:
- gulp dist
after_script:
- cd dist
- git init
- git config user.name "my git name"
- git config user.email "my git email"
- git add -A
- git commit -m "travis -- update gh-page"
- git push --force --quiet "https://${GH_TOKEN}#${GH_REF}" master:gh-pages
- sh ../purgeCF.sh $CF_ZONE $CF_KEY $CF_EMAIL
- cd ..
- git add -A
- git commit -m "travis -- update master files"
- git push --quiet "https://${GH_TOKEN}#${GH_REF}" HEAD:master
# E: Build LifeCycle
branches:
only:
- master
env:
global:
- GH_REF: github.com/mygitname/myprojectname.git
In this script, I first update and build website sourcefiles with gulp, storing them into "dist" folder. Then I push content in "dist" to my gh-pages branch, and push everything else to my master branch.
The credentials are stored as security keys with Travis and should work correctly.
To push "dist/", I created a new ".git/" under "dist/" and force push it as new.
To push everything else, I could not do it because the root repository already contains ".git" folder and I do not want to lose my previous commits. It should work.
Thanks for help.
I found most articles or answers were talking about how to deploy to gh-pages branch, and most ways is not work for me , i debug this issue on travis for several days, i will list key steps about how to push to master brach on travis
e.g. Below is my doc repository script, travis will update readme.md automated.
Generate github token, you can refer to the article https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/
Set Environment Variables
GH_REF githu.com/clownvary/docs.git your repository address
GITHUB_API_KEY *********** your token generated on step 1
Script
os: osx
language: node_js
cache:
directories:
- node_modules
node_js:
- 'lts/*'
before_install:
- git pull
- brew install tree
install:
- npm install
script:
- npm run updateReadme
after_success:
- git config user.email "travis#travis.org"
- git config user.name "travis" # this email and name can be set anything you like
- git add README.md
- git commit --allow-empty -m "updated README.md"
- git push https://clownvary:${GITHUB_API_KEY}#${GH_REF} HEAD:master #clownvary is my username on github, you need to use yourself , do not use travis or others.
Hope this can help you
Even though #gary wang method is working, there is much simpler method that can push into GitHub master branch directly.
Just add target_branch variable under deploy section, and assign it with master.
Documentation on Travis CI GitHub Pages Deployment: https://docs.travis-ci.com/user/deployment/pages/
Sample contents of .travis.yml:
language: node_js
...
...
...
deploy:
provider: pages
skip_cleanup: true
keep_history: true
github_token: $github_token # Your GitHub token set in Travis CI console
target_branch: master # Add this line - To push into GitHub master branch
on:
branch: staging # Your GitHub repo default branch
This method is tested and working as per expected.