xrealneon/vuepagesaction

This Action will Build your Vue Project and deploy it to Github Pages

Build Vue and deploy it to Github Pages 🚀

This Action will Build your Vue Project and deploy it to Github Pages

Getting Started 🎉

• For Vue 2 : Create the vue.config.js file
• For Vue 3 : You should have a vite.config.js or a vite.config.ts file at the root of your directory. Create one if you don't.

• For Vue 2 : Add this to your vue.config.js (and rename "YourRepoName" to your repo name)

module.exports = {
    publicPath: '/YourRepoName/'
}

• For Vue 3 : Add this to you vite.config.js or vite.config.ts (and rename "YourRepoName" to your repo name)

export default defineConfig({
  ... // Already existing configurations
  base: '/YourRepoName/'
});

3. Create a Github Actions Workflow file and add this to it (and replace "YourGithubName" and "YourRepoName" with the names)

name: Build Vue
on: [push]
jobs:
  build_vue:
    runs-on: ubuntu-latest
    name: Build Vue
    steps:
    - uses: actions/checkout@v2
    - id: Build-Vue
      uses: xRealNeon/[email protected]
      with:
        username: 'YourGithubName'
        reponame: 'YourRepoName'
        token: ${{ secrets.GITHUB_TOKEN }} # Leave this line unchanged

4. Go to Settings -> Scroll down to GitHub Pages -> Select gh-pages as branch and / as directory

Options 🔧

Name	Description	Default	Required
username	Your username	-	✅
reponame	Your repository name	-	✅
token	Please leave this line unchanged	-	✅
gitemail	Git commit email	[email protected]	❌
gitname	Git commit name	CI	❌
gitmsg	Git commit message	deploy	❌
cname	Custom domain	-	❌
useyarn	Use yarn to build	false	❌

vuepagesaction's Issues

Support for Vue project having yarn.lock

Hi,

I am trying to integrate this action with one of my Vue projects that uses yarn and not npm, so instead of package-lock.json, a yarn.lock is created.

Is it possible to support that?

Thanks

PS: Let me know if this is the wrong place to add this query.

"Git: Permission denied" by default

The problem

There's no write permissions for actions by default, as now by default access is Default assess (restricted).

Workaround

You can easily switch to legacy behaviour, when writing is available, see ad-m/github-push-action#96 (comment)

Solution

Setting the .permissions for step might be the solution.

Not quite sure about the prefect solution, but https://docs.github.com/en/actions/security-guides/automatic-token-authentication will definitely help.

Documentation should be updated for Vue 3

I had some trouble getting this action to work with Vue 3, and figured the vue.config.js file is no longer used with the new vite build tool. The file to update is now vite.config.js. I will open a pull request with a suggestion of an updated documentation.

Production Build Cross-Compatibility

Hello. I have found this action to be very useful in my automated workflow. However, I am looking to develop mobile apps using the same production codebase. Unfortunately, the vue.config.js will always insert the GH Pages sub-path whenever a production build is run. This causes the dist to be unusable for anything but GH Pages as other applications expect to use root.

At the moment this Github Action is the only thing that uses the sub-path. I would appreciate the ability to specify a build target rather than assume it's "npm run build". This would let me specify a new target that uses a mode other than "production" so that GH Pages gets the path it needs without polluting the other types of distributions.

Example in Vue - https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode

Failed to create symbolic link

Sorry for another inconvenience eheh,
I'm having this error in this repo: ln: failed to create symbolic link '404.html': File exists.
I'm using this solution to avoid errors on vue on github pages using vue router history mode. Is my solution adopted wrong?

Execute other tasks before build

Hi,

I would like to execute some other commands before the Vue app will be build such as unit tests and so one. Is it possible with action or can I use some other action first followed by this one?

Update to silence the warning

Hello,
before all, thank you for the useful action. I've noticed this warning in log of my runs:

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint: 	git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint: 	git branch -m <name>

Can I prepare a pull request to silence this warning? My proposal is to call the default branch not master, but main, like Github is already suggesting.

Inconsistent build outcome vs local

First of all, thanks for making the action. It worked for my project, until a recent update.

I updated some dependencies (including update TS from 4 to 5) and changed some settings of my project. The build succeeds on my local machine.

However, when using this action, on github executor, it complains the following error:

> [email protected] build-only
> vite build

vite v4.4.6 building for production...
transforming...
src/common/userInfoUtils.ts(27,45): error TS7006: Parameter 'data' implicitly has an 'any' type.
src/components/ResourceItem.vue(55,45): error TS7006: Parameter 'data' implicitly has an 'any' type.
src/components/ResourceItem.vue(81,45): error TS7006: Parameter 'data' implicitly has an 'any' type.
ERROR: "type-check" exited with 2.
Error: Process completed with exit code 1.

I have checked the commands, and they should be the same: npm run build.
I have also tried removing node_modules and run npm ci && npm run build. Still no such errors on my local machine.

Any ideas on why this happened, and how to solve it?

The relevant build environment is: renyuneyun/PermiX@a339279