A Vue.js PWA for poster creation and viewing
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
tools
.browserslistrc
.dockerignore
.eslintrc.js
.gitignore
.gitlab-ci.yml
.npmrc
.prettierignore
.prettierrc.yml
Dockerfile
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js
vue.config.js

README.md

PosterVote frontend

This is the repo for the PosterVote front end source code. It is a VueJs app written in JavaScript and deployed through Docker. It is a PWA served inside a single index.html file which is compiled through the vue cli using Webpack.

What is PosterVote?

Table of Contents

Development

Scripts

# Install dependencies (run once after a clone)
npm install

# Run a development server
npm run serve
open http://localhost:8080

# Manually lint dependancies
npm run lint

Structure

Folder Use
public Static assets to be served by nginx
src The location of the source code
src/assets Assets to be compiled in with webpack
src/components Custom Vue components
src/services Custom js services to access things, i.e. the postervote api
src/views Custom Vue components to be routed to
tools Scripts to ease development

Formatting

This repo uses Prettier to automatically format code when you stage changes. This means that code that is pushed is always formatted to a consistent standard. You can manually run the formatter with npm run prettier.

Other tools

# Generates sized favicons based on `public/large-icon.png`
node tools/genFavicon.js

# Generate the table of contents for this readme
node tools/markdownTOC.js

Deployment

Building the image

This project uses a GitLab CI to build a Docker image when you push a git tag. This is designed to be used with the npm version command so all docker images are semantically versioned.

npm version ... # major | minor | patch
git push --tags

Using the image

With this docker image you can easily deploy it to your server using docker-compose. This repo uses configurable nginx to allow docker environment variables be set inside the JavaScript PWA. You can set where the api is as seen below.

version: '3'

services:
  web:
    image: openlab.ncl.ac.uk:4567/poster-vote/vue-frontend:1.0.0
    restart: unless-stopped
    ports:
      - 80:80
    environment:
      - CONFIG_KEYS=API_URL
      - API_URL=https://api.postervote.example.io

Future Work

  • Only show your posters on /posters (if you visted another and its cached)

The code on https://github.com/poster-vote/vue-frontend is a mirror of https://openlab.ncl.ac.uk/gitlab/poster-vote/vue-frontend