Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/areafiftylan/lancie-frontend
Website for Area FiftyLAN
https://github.com/areafiftylan/lancie-frontend
docker frontend lanparty polymer yarn
Last synced: 7 days ago
JSON representation
Website for Area FiftyLAN
- Host: GitHub
- URL: https://github.com/areafiftylan/lancie-frontend
- Owner: AreaFiftyLAN
- License: mit
- Created: 2015-11-12T16:09:07.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-11T10:01:02.000Z (over 1 year ago)
- Last Synced: 2024-12-19T21:14:21.674Z (7 days ago)
- Topics: docker, frontend, lanparty, polymer, yarn
- Language: HTML
- Homepage: https://areafiftylan.nl
- Size: 52.3 MB
- Stars: 5
- Watchers: 6
- Forks: 5
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.polymer-project.org/1.0/), 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](https://github.com/AreaFiftyLAN/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](https://www.polymer-project.org/1.0/docs/about_10). 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](https://elements.polymer-project.org).
### Tools & Dependencies
These are the tools you need to install manually, the rest of the needed tools follow from this.
- [node](https://nodejs.org/en/) 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](https://yarnpkg.com/en/docs/install) 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](https://docs.docker.com/engine/security/rootless/) 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 [email protected]:AreaFiftyLAN/lancie-frontend.git
cd lancie-frontend
yarn
bower install
yarn run serve
```
## Thanks
BrowserStack: For providing testing support
