MINTvernetzt

How to

Set up Node.js

1. Install nvm (Guide)
2. Run nvm use in repository root

Hint:

If you can read something like You need to run "nvm install v16.5.0" to install it before using it. run nvm install v16.5.0. 😎

Create

We are using Nx to scaffold applications, services, libraries, etc. For easy use we provide some scripts but you can also use the Nx Console Plugin for VSCode.

React App

1. Run npm run create-react-app
2. You will be asked to enter the application name

React Library

Run npm run create-react-lib -- --name=<application name> --importPath=<import path> (import path looks like @mint-vernetzt/react-components)

React Component

for Library

1. Run npm run create-react-lib-component
2. You will be asked to enter the project name
3. You will be asked to enter the component name

Hint:

By passing arguments to the script call (e.g. npm run create-react-app -- --name=<application name>) you can pass e.g. the application name directly or override default properties.

Website

For our website we are using Wordpress as backend and Gatsby for static site generation.

Set up Wordpress locally and connect Gatsby

Option 1: DDEV and Bedrock (recommended)

We provide a WordPress installation set up with DDEV and Roots' Bedrock in apps/website-backend. To run this setup you have to install docker on your machine first. If docker is installed follow the installation manual provided by DDEV.

Next steps after installation:

1. Run ddev composer install to install the dependencies
2. Create an .env in the backend root (apps/website-backend) an set all environment variables (DB_NAME, DB_USER, DB_PASSWORD, DB_HOST, DB_PREFIX, WP_ENV, WP_HOME, WP_SITE_URL) (Hint: The values can be found in apps/website-backend/wp-config-ddev.php)
3. Run ddev launch and configure your WordPress installation
4. Run ddev wp plugin activate --all to activate the installed WordPress plugins
5. Run ddev launch to open the site in your browser
6. Create the files .env.development and .env.production in the website root (apps/website) and add the environment variable CMS_API with the value https://website-backend.ddev.site/wp/graphql.

Option 2: Local

1. An easy way to run Wordpress locally is using Local. Just follow the "Getting Started" instruction on their website and create your local Wordpress installation.
2. You have to install the following plugins to extend you Wordpress installation with GraphQL and make it accessible for Gatsby: WPGatsby and WP GraphQL.
3. Create the files .env.development and .env.production in the website root (apps/website) and add the environment variable CMS_API with the url of your local Wordpress installation (e.g. CMS_API=https://mywordpress.local/graphql).

Troubleshooting

If you have trouble with the self signed certificate on you Mac while using Local follow this instruction: Managing a Local site’s SSL certificate in macOS.

If you get an error regarding the self signed certificate while running Gatsby follow this instruction: Using self-signed certificates

4. Now, if you run Wordpress and the website in parallel, Gatsby reads all data from the GraphQL-API.

commands

1. Run npm run serve-website to run the website for development
2. Run npm run build-website to create a production build of the website

If you run the website on this state of installation you will receive an error regarding custom fields we are using (e.g. Organization).

Enable Advanced Custom Fields for Gatsby

To provide custom content elements we are using "Advanced Custom Fields" (ACF).

• If you are using Local you have to install the following plugins: Advanced Custom Fields, Custom Post Type UI, and WPGraphQL for Advanced Custom Fields (needs to be manually installed).
• Create a new Post Type in Wordpress (CPT UI > Add/Edit Post Types).
• In the Add/Edit Post Types View scroll down to the WPGraphQL section and set Show in GraphQL to True and activate the Taxonomies Categories (WP Core) and Tags (WP Core).
• Please create following post types to your Wordpress installation: Organizations.
• Now you can use the custom content type querying for allWpSingularLabel (e.g. allWpOrganization).

Use Design System

We are using Storybook for our design system. If you want to use Storybook in your library please follow the instructions from the Nx documentation.

Here you can find the current build of the design system.

commands

1. Run npm run serve-design-system to run the design system
2. Run npm run build-design-system to create a production build of the design system

Write commit messages

We are using AngularJS's commit message convention to provide features like automatic changelog generation. To force this convention we are using the Commitizen command line tool. If you commit changes via git commit you'll be ask about scope, type, subject, etc. of the changes.