This repository has been archived by the owner on Apr 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
68 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,40 @@ | ||
# web | ||
|
||
[![Build Status][build-status-image]][build-status] | ||
A web interface for streaming music from forte. | ||
|
||
[Check out the demo site!][demo-site] | ||
[![Build Status][build-status-image]][build-status] | ||
|
||
## Quickstart | ||
|
||
yarn query-codegen && yarn start-mock | ||
|
||
## Build Configuration | ||
|
||
This project was bootstrapped with [create-react-app]. We've since ejected, but still use many of its features. | ||
|
||
## Generated Files | ||
|
||
[GraphQL] is used to talk to the backend. Given a schema and a graphql request string, we can compute the response type and provide it to typescript so typechecking code around API calls works. | ||
|
||
To generate typing information for responses which typescript understands, use `yarn query-codegen`. Re-run this command every time a query or the schema changes and after pulling new versions from the remote. These files are stored in a sibling folder named `__generated__` to the file the query is defined in. The files in `__generated__` are ignored by git. | ||
|
||
The `query-codegen` script is run before the `build` and `check-all` scripts. | ||
|
||
## Mock Backend | ||
|
||
A few things change when the application is run in an environment with the `REACT_APP_MOCK_RESOLVER` variable set to a truthy value. | ||
|
||
First, a mock [GraphQL] resolver is used instead of a resolver which queries a remote endpoint. The graphql resolver is provided by the [`@forte-music/mock`][forte-music/mock] npm package with data from the [`@forte-music/schema`][forte-music/schema] npm package. [The mock data can be found in the toml files here.][mock] | ||
|
||
Second, instead of fetching audio files from the remote server, a fixed set of audio files is used instead. Each song in the mock data maps to an audio file based on the identifier of the mock song's identifier. Multiple songs may share the same underlying audio file. | ||
[GraphQL] is used to talk to the backend. Given a schema and a graphql | ||
request string, we can compute the response type and provide it to typescript | ||
so typechecking code around API calls works. | ||
|
||
These features allow developing the frontend independently of the backend. | ||
To generate typing information for responses which typescript understands, | ||
use `yarn query-codegen`. Re-run this command every time a query or the | ||
schema changes and after pulling new versions from the remote. Generated | ||
files are stored in a sibling folder named `__generated__` to the file the | ||
query is defined in. Files in `__generated__` are ignored by git. | ||
|
||
The `start-mock` and `storybook` scripts enable mock behavior for their corresponding actions. | ||
## Backend | ||
|
||
## External Server | ||
By default (`yarn start`) this application connects to a backend hosted at | ||
`localhost:8080`. Configure this by changing the proxy key of `package.json`. | ||
See the [create react app proxy guide][proxy-guide] for more. | ||
|
||
To use an external graphql resolver, run `yarn start` instead of `yarn start-mock` and configure the [Create React App Proxy][proxy-guide] to proxy requests to your server. | ||
There's a mock backend which can be enabled by using `yarn start-mock`. When | ||
enabled, a mock graphql resolver will run inside the dev server. A playground | ||
can be found at `localhost:3000/graphql`. The mock resolver is provided by | ||
[`@forte-music/mock`][forte-music/mock]. The mock backend even configures the | ||
app to use a set of royalty free tracks so features around playback can be | ||
tested. | ||
|
||
[graphql]: https://graphql.org/ | ||
[demo-site]: https://forte.surge.sh/ | ||
[proxy-guide]: https://github.com/facebook/create-react-app/blob/cb1608b3e02e0eef5fd350f6e4cf5ce32bdfc215/packages/react-scripts/template/README.md#proxying-api-requests-in-development | ||
[proxy-guide]: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development | ||
[build-status-image]: https://img.shields.io/circleci/project/github/forte-music/web/master.svg | ||
[build-status]: https://circleci.com/gh/forte-music/web | ||
[forte-music/mock]: https://github.com/forte-music/schema/tree/master/packages/mock | ||
[forte-music/schema]: https://github.com/forte-music/schema/tree/master/packages/schema | ||
[mock]: https://github.com/forte-music/schema/tree/master/packages/schema/fixtures | ||
[create-react-app]: https://github.com/facebook/create-react-app |