Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/addono/teknifront
The frontend of the TekniLight project. Mirror from the main repository hosted in Gitlab. Issues are handled there.
https://github.com/addono/teknifront
frontend gitlab iot react vercel
Last synced: 12 days ago
JSON representation
The frontend of the TekniLight project. Mirror from the main repository hosted in Gitlab. Issues are handled there.
- Host: GitHub
- URL: https://github.com/addono/teknifront
- Owner: Addono
- License: mit
- Created: 2019-12-14T11:34:48.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-23T18:13:17.000Z (over 1 year ago)
- Last Synced: 2024-04-14T05:47:25.099Z (7 months ago)
- Topics: frontend, gitlab, iot, react, vercel
- Language: TypeScript
- Homepage: https://gitlab.com/tekniot/teknifront
- Size: 10.4 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
TekniFront
---
The frontend of the TekniIoT project.
## 📝 Table of Contents
- [About](#about)
- [Getting Started](#getting_started)
- [Running the Tests](#tests)
- [Deployment](#deployment)
- [Usage](#usage)
- [Built Using](#built_using)
- [Authors](#authors)
- [Acknowledgments](#acknowledgement)
This is the frontend of the [TeknIoT](https://gitlab.com/tekniot/) project. It can be used to announce state updates of the lights, which will be picked up by the [TekniBridge](https://gitlab.com/tekniot/teknibridge).
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See [deployment](#deployment) for notes on how to deploy the project on a live system.
### Prerequisites
You need to have [Yarn](https://yarnpkg.com/en/docs/install) installed to use this repository.
### Installing
First we need to install all dependencies, run:
```bash
yarn install
```
To start the development environment, run:
```bash
yarn start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will automatically reload whenever you save any file and display potential compilation errors.
After setting up the development environment, tests can be invoked using:
```bash
yarn test
```
This launches the test runner in the interactive watch mode.
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
Execute
```bash
yarn build
```
Which builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the Create-React-App documentation about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
Deploy the static files to a CDN. We would recommend using continious deployment to automate this process, e.g. by using [Zeit Now](https://zeit.co/now) which shouldn't need any configuration to setup.
### Manually
After setting up the project, create a build:
```bash
yarn build
```
This will emit the project as a static website in the `build/` directory. Deploy these to a CDN or your self-hosted solution for serving static files.
### Docker
There are Docker images available at [Gitlab Container Registry](https://gitlab.com/tekniot/teknifront/container_registry), or you can build them yourself.
For example, the following command exploses the application at port [`http://localhost:3000`](http://localhost:3000).
```bash
docker run --rm --detach --publish 3000:80 --name teknifront registry.gitlab.com/tekniot/teknifront:latest
```
- [React](https://reactjs.org/) - Frontend Framework
- [MQTT](https://mqtt.org/) - Backend Communication Protocol
- [Gitlab](https://gitlab.com) - VCS and Continuous Integration
- [Vercel](https://vercel.com) - CDN and Continuous Deployment
- [Adriaan Knapen](https://aknapen.nl) [](https://gitlab.com/Addono) [](https://github.com/Addono)
- [Andrés Prieto Yanes](https://andrespy.gitlab.io) [](https://gitlab.com/andrespy) [](https://github.com/andrespy)
- Thank you React community for all the awesome packages you made!