hackafront

Hackaton front-end template with Vue.js, TypeScript, GraphQL, JWT and some CI set up.

Abstract

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.

Getting started

# 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

Workflow

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

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.

GraphQL

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.

TypeScript

We chose to use TypeScript over regular JavaScript to capitalize on the advantages of strong typing: build time type checking, auto completion, self-documentation ...

CI

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:

CircleCI

Environment variables to set on CircleCI:

CODACY_PROJECT_TOKEN: Settings > Integrations > Project API > Settings
CODECOV_TOKEN: Settings > Repository Upload Token
DOCKER_USER: Docker Hub username to push the images
DOCKER_PASS: Docker Hub password
GITHUB_API_TOKEN: https://github.com/settings/tokens > generate new token > scopes repo and admin:repo_hook (used to publish release + publish recaps)
GITHUB_TOKEN: same ^

tsauvajon / hackafront