DEV Community

Cover image for Creating vite vue ts template: Setup Github Actions
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Updated on

Creating vite vue ts template: Setup Github Actions

Configure Github Actions for bulid

  1. Let start by setting up Node.js workflow.
  2. Go to Actions tab in your project and find Node.js workflow.
    Node.js workflow

    (it may be hidden under More continuous integration workflows...)
    More continuous integration workflows
    and press Set up this workflow button.

  3. Rename node.js.yml to build.yml. Commit build.yml with Start commit button. Add Create .github/workflows/build.yml commit message.
    Commit build.yml

On commit pre-commit.ci may fail because of prettier formatting.

  1. git pull
  2. pre-commit run --all-files
  3. git add -u
  4. git commit -m 'fix: prettier formating'

Update .github/workflows/build.yml

  1. We do not have tests yet and build is present in package.json

           - run: npm ci
    -      - run: npm run build --if-present
    -      - run: npm test
    +      - run: npm run build
    
  2. git add -u

  3. git commit -m 'do not run npm test for build workflow'

Add badge

  1. Add ![build](https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/build.yml/badge.svg) to README.md. From docs

    You reference the workflow by the name of your workflow file.

    ![example workflow](https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg)
    
  1. git add -u
  2. git commit -m 'add build workflow badge'

Links

Project

GitHub logo imomaliev / vue-ts

Template vite vue typescript

Discussion (0)