Hackaton front-end template with Vue.js, TypeScript, GraphQL, JWT and some CI set up.
This project is a boilerplate for hackatons. Instead of spending hours or days initialiazing a project, the CI, the deployments and so on, when you already have a short time span just clone this and a GraphQL backend and you're set to go.
It is meant to be used with Backathon, but can be used with any GraphQL back-end.
Consider the use of Graphcool if you want to focus on the front-end because you don't have the time / need / knowledge to build a GraphQL back-end.
# install dependencies
yarn
# serve with hot reload at localhost:8080
yarn dev
# build for production with minification
yarn build
# build for production and view the bundle analyzer report
yarn build --report
# run unit tests
yarn unit
# run e2e tests
yarn e2e
# run all tests
yarn test
git checkout dev
git fetch
git pull
git branch -b '(feat|fix|refacto)/branch_name
pull out a branch from dev (up to date)- dev your stuff
git add .
git commit -S -m 'Your commit description'
git push origin (feat|fix|refacto)/branch_name
- create a pull request to run checks (conflicts, CI)
- ask for a review
- squash and merge
- repeat
- create a pull request from dev to master when you are ready for production
Vue.js (or just Vue
) is a JavaScript front-end
framework, competing with Angular and React, amongst others. We have chosen to
use Vue over any other framework for its simplicity, modularity and performance.
While on a rush to have a working application, learning Vue will be easier for developers unfamiliar with it than learning React or Angular. That's obviously in the case you don't know your teammates in advance !
We recommand using Vuetify for the UI components.
We believe that GraphQL is the future of APIs, while not
adding too much boilerplate code for small applications. Changing to a REST
API would be easy: nothing to add, just remove every graphql
and apollo
package and reference.
To generate the schema from an existing GraphQL endpoint, set the SERVER_URL
environment variable and run yarn gql
.
The generated types will be placed at src/typings/types.ts
.
We chose to use TypeScript over regular JavaScript to capitalize on the advantages of strong typing: build time type checking, auto completion, self-documentation ...
The code is linted with ESLint and TSLint, and tested with Jest and Nightwatch. The test coverage results are uploaded to Codecov.
It is continuously tested and build with CircleCI, and published to the Docker Hub on every push to the master branch.
Every branch is automatically deployed and updated at
https://[branch]--hackafront.netlify.com
and every pull request at
https://deploy-preview-[#pr]--hackafront.netlify.com
, with
Netlify.
The code is reviewed by 2 static analysis providers:
Environment variables to set on CircleCI:
CODACY_PROJECT_TOKEN
: Settings > Integrations > Project API > SettingsCODECOV_TOKEN
: Settings > Repository Upload TokenDOCKER_USER
: Docker Hub username to push the imagesDOCKER_PASS
: Docker Hub passwordGITHUB_API_TOKEN
: https://github.com/settings/tokens > generate new token > scopesrepo
andadmin:repo_hook
(used to publish release + publish recaps)GITHUB_TOKEN
: same ^