Awesome

LANcie frontend

Welcome to the pretty part of the Area FiftyLAN system! This repo contains all the code that you will see served at https://areafiftylan.nl, including the ticketsale, my-area and seatmap. The front-end is built with Polymer, Google's Web Components library. There are a couple of things you need to do before you can enjoy all that lovely material design goodness.

The application works without a back-end, but to enjoy the full functionality, you need to have the back-end running aswell. You can find our back-end also on GitHub, the LANcie-API.

lancie-frontend

Handles front end user interaction, couples with lancie-api. Built with Polymer, all the polymer documentation about the internal functions can be found here. It would be helpful to glance over the internal polymer functions, this will avoid small mistakes and issues early on. All documentation about the Polymer elements is located here.

Tools & Dependencies

These are the tools you need to install manually, the rest of the needed tools follow from this.

• node which is the Javascript runtime environment that is used by the other tools. If you have installed this, you need to run three commands to finalize the installation. These commands require you to globally install some tools, during installation an error could occur regarding permissions. If you are required to call the commands with superuser priviliges you are doing something wrong!
• yarn is the package manager we use to fetch all javascript dependencies.
• yarn global add bower
• yarn
• bower install

Viewing locally

To view the webpage locally, run yarn run serve. The page will be shown on http://localhost:5100

Build

To build the entire frontend, the yarn run build command is used. This command relies on the polymer-cli package with v1.5.7 or higher. The build process places the complete and ready to serve webpage in ./build. There are two folders located in the build folder, a es5-bundled and an es6-unbundled version. The bundled version is for non-http/2 compatible servers. The unbundled version is for http/2 compatible servers. Keep in mind that if images are added since the last build, these have to be compressed, this is done with yarn run build optimize-images.

You can serve the build with polymer serve build/fallback or polymer serve build/modern.

With Docker

Follow this guide to manage Docker as a non-root user (optional, for linux users).

• To build with Docker, run docker build . -t lancie-frontend.
• To run the image you created, invoke docker run -p 8080:8080 -t lancie-frontend -n lancie-frontend.
• The PRPL-server should be accessible on localhost:8080 while it also connects to the internal Docker port 8080.
• To kill the Docker container, run docker stop lancie-frontend.

Deploy

Frontend is automatically deployed by updating the live git branch and publishing a new tag in the form YEAR.MAJOR.MINOR. For example, the first release for the LAN-party of 2018 is 2018.1.0, while the second minor update of the second release is 2018.2.2.

To push a tag to the live branch, pull the release tag after creating it on Github (with a regular git pull on master), and then:

git push origin {tag}:live

for example: git push origin 2021.1:live

TL:DR;

git clone git@github.com:AreaFiftyLAN/lancie-frontend.git
cd lancie-frontend
yarn
bower install
yarn run serve

Thanks

BrowserStack: For providing testing support