Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terrestris/react-geo-client-template
This template application demonstrates the usage of react-geo.
https://github.com/terrestris/react-geo-client-template
antd babel eslint jest less ol playwright react react-geo reactjs redux redux-toolkit rspack testing-library typescript
Last synced: 2 months ago
JSON representation
This template application demonstrates the usage of react-geo.
- Host: GitHub
- URL: https://github.com/terrestris/react-geo-client-template
- Owner: terrestris
- License: bsd-2-clause
- Created: 2022-03-25T13:03:47.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T08:10:24.000Z (4 months ago)
- Last Synced: 2024-10-28T09:36:56.097Z (4 months ago)
- Topics: antd, babel, eslint, jest, less, ol, playwright, react, react-geo, reactjs, redux, redux-toolkit, rspack, testing-library, typescript
- Language: TypeScript
- Homepage: https://terrestris.github.io/react-geo-client-template
- Size: 215 MB
- Stars: 3
- Watchers: 13
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING
- License: LICENSE
Awesome Lists containing this project
README
# react-geo client template
This template application demonstrates the usage of [react-geo](https://github.com/terrestris/react-geo)
and can easily be installed via the [create-react-geo-app (CRGA)](https://github.com/terrestris/create-react-geo-app)
command line tool.
## Features ⭐
This application contains several features to increase the development experience, e.g.:
- Written in [TypeScript](https://www.typescriptlang.org/)
- Rspack [Hot Module Replacement](https://rspack.org/guide/tech/react#fast-refresh)
- Analyis of the build output via [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- Optimized build including [code splitting](https://webpack.js.org/guides/code-splitting/)
- Styling via [Less](https://lesscss.org/)
- Preconfigured [Dockerfile](https://www.docker.com/) for production and development
- Unit testing via [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/)
- End-To-End testing via [Playwright](https://playwright.dev/)
## Getting started 🧑💻
Install all required dependencies via:
```
npm i
```
And start the local development server:
```
npm run start
```
The application is now available at [https://localhost:8080](https://localhost:8080).
**Recommendation**: If you already have an existing `docker-compose` setup e.g. providing
a backend, the client should communicate with, we recommend to start the client inside this
setup as this would make redundant the need for several custom configuration
(e.g. a webpack proxy).
To include the client, just extend your existing `docker-compose.yml` with a service similiar
to the following example:
```
react-geo-client-template:
build:
context: ../react-geo-client-template
dockerfile: Dockerfile.dev
ports:
- 8080:8080
volumes:
- ../react-geo-client-template:/app
```
Please note that your local `node` version should always match the node version inside
the `Dockerfile.dev`.
## e2e tests 🧪
To run the e2e tests locally it's probably required that you install all required browsers and
system dependencies via:
```
npx playwright install
npx playwright install-deps
```
## Road to production 🏭
The build artifact of the client can either be build via
```
npm run build
```
or directly included in an `nginx` based Docker image via:
```
docker build -t react-geo-client:1.0.0 .
```
(Run `docker run -p 80:80 react-geo-client:1.0.0` to start it locally.)
## Contribution
Contributions are much appreciated! 🥳
Read the hints for developers to get started. We look forward to your contributions!