Taller's Chat Stack
Hipster to the core
This application consists of a Drupal 8 backend providing a GraphQL API which is consumed by Apollo on a Next.js based React application.
The Drupal 8 install is a pretty straight forward one:
- It uses Composer as a dependency manager for both vendor packages and Drupal modules;
- Drupal's web root can be found at ./drupal directory
- It is using a custom profile, found at ./drupal/profiles/custom/taller_chat;
- Custom modules (where any code of yours should most probably reside) at ./drupal/modules/custom;
- It has modules graphql and graphql_mutation for exposing the GraphQL API.
The container is configured to download dependencies and install Drupal on the first time you run it, but if you have any trouble with this step please follow the official installation guide.
Drupal will connect to a MySQL database provided within a parallel container which will also be automatically configured for you.
Once the container is running, you can access Drupal's administrative interface on http://localhost, using the following credentials:
Username: admin
Password: password
GraphQL is the way of communication between Drupal and the React app. The API is provided by Drupal on the http://localhost/graphql endpoint.
You can navigate on the available schema using a GraphiQL instance available at http://localhost/graphql/explorer.
If you need to create new fields or even types, you can follow the examples on the available custom Drupal modules.
Apollo is the GraphQL client used by the React application. It uses the environment variable GRAPHQL_HOST to send POST requests with GraphQL query bodies for either queries or mutations.
You can customize the client at ./next/src/lib/initApollo.js.
Not much to say here. Version ^16.2.0 is used. Also, here are some used libraries worth mentioning:
- Recompose;
- grommet for bootstraped UI;
- styled-components for CSS in JS;
- Ramda for functional programming;
- react-final-form for form management.
Next.js is the React framework used to define routes, split code, and server-side render the application. It's root can be found on the ./next directory.
There is some customization to make styled-componets work, as well as for universal environment variables (refer to the env-config.js file for more information). Other than that, it is quite a clean install.