|
1 | 1 | # Flux-Frontend |
2 | 2 |
|
3 | 3 | <div align="center"> |
4 | | - |
5 | | - [](https://github.com/facebook/jest) |
6 | | - [](https://github.com/Flux-Coordinator/flux-frontend) |
7 | | - [](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating) |
8 | | - [](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=coverage) |
9 | | - [](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=alert_status) |
10 | | - [](https://travis-ci.org/Flux-Coordinator/flux-frontend) |
11 | | - [](https://github.com/prettier/prettier) |
12 | | - [](https://david-dm.org/Flux-Coordinator/flux-frontend) |
13 | | - [](https://david-dm.org/Flux-Coordinator/flux-frontend?type=dev) |
14 | | - [](https://david-dm.org/Flux-Coordinator/flux-frontend?type=peer) |
15 | | - |
| 4 | + |
| 5 | +[](https://github.com/facebook/jest) |
| 6 | +[](https://github.com/Flux-Coordinator/flux-frontend) |
| 7 | +[](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating) |
| 8 | +[](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=coverage) |
| 9 | +[](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=alert_status) |
| 10 | +[](https://travis-ci.org/Flux-Coordinator/flux-frontend) |
| 11 | +[](https://github.com/prettier/prettier) |
| 12 | +[](https://david-dm.org/Flux-Coordinator/flux-frontend) |
| 13 | +[](https://david-dm.org/Flux-Coordinator/flux-frontend?type=dev) |
| 14 | +[](https://david-dm.org/Flux-Coordinator/flux-frontend?type=peer) |
| 15 | + |
16 | 16 | </div> |
17 | 17 |
|
18 | | -## Ordnerstruktur |
| 18 | +## How to run this application in development mode |
| 19 | + |
| 20 | +Follow the guide below to run this application in development mode. |
| 21 | +**Prerequisites:** [NodeJS 8](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com/en/docs/install) (recommended) or NPM. |
| 22 | + |
| 23 | +1. Download the repository |
| 24 | +2. Install the dependencies using `yarn` or `npm install` |
| 25 | +3. Run the application using the `yarn start` or the `npm run start` command. |
| 26 | + |
| 27 | +The URI for the connection to the [flux-server](https://github.com/Flux-Coordinator/flux-server) instance needs to be set either as an environment variable named `REACT_APP_SERVICE_URI` or using a [_.env_](https://github.com/motdotla/dotenv) file, in which you have the following content: |
| 28 | + |
| 29 | +``` |
| 30 | +REACT_APP_SERVICE_URI = <sever_uri> |
| 31 | +``` |
| 32 | + |
| 33 | +## Run in Production Mode |
| 34 | + |
| 35 | +To run this application in production mode, you need to build it first, using the `yarn build` or `npm run build` command. After the command has run through, you will find the built application in the _/build_ folder. You can deploy that folder on your preferred static webserver or using [serve](https://github.com/zeit/serve). |
| 36 | + |
| 37 | +To install serve globally, you can use the `yarn global add serve` or `npm install -g serve`. After the installation is complete, you can use the command `serve -s build`, where build the _/build_ folder. |
| 38 | + |
| 39 | +If you use a webserver other than serve, you will need to make some changes. Follow the guide [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing). |
19 | 40 |
|
20 | | -Die Ordnerstruktur im **./src** Ordner sieht wie folgt aus: |
| 41 | +## More informations |
21 | 42 |
|
22 | | -| Ordner | Beschreibung | |
23 | | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
24 | | -| src/api | Die JS Dateien in diesem Ordner stellen die Anfragen an das backend API. | |
25 | | -| src/components | In diesem Ordner befinden sich die Presentational Components. Merke, dass die CSS und Tests ebenfalls in diesem Ordner zusammen mit ihren Components befinden. | |
26 | | -| src/containers | In diesem Ordner befinden sich die Container Components. Diese machen die API Calls und besitzen einen State. Merke, dass die CSS und Tests ebenfalls in diesem Ordner zusammen mit ihren Components befinden. | |
27 | | -| src/images | Hier befinden sich die Bilder, die in der Anwendung verwendet werden. | |
28 | | -| src/index.jsx | In dieser Datei wird die App initialisiert. | |
29 | | -| src/utils | Alles, was sonst nicht eingeordnet werden kann und keinen eigenen Ordner verdient. | |
| 43 | +For more information about running and deploying the application, you can consult the CRA documentation [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md). |
0 commit comments