- Install nvm (Guide)
- 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
. π
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.
- Run
npm run create-react-app
- You will be asked to enter the application name
Run npm run create-react-lib -- --name=<application name> --importPath=<import path>
(import path
looks like @mint-vernetzt/react-components
)
- Run
npm run create-react-lib-component
- You will be asked to enter the project name
- 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.
For our website we are using Wordpress as backend and Gatsby for static site generation.
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:
- Run
ddev composer install
to install the dependencies - 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 inapps/website-backend/wp-config-ddev.php
) - Run
ddev launch
and configure your WordPress installation - Run
ddev wp plugin activate --all
to activate the installed WordPress plugins - Run
ddev launch
to open the site in your browser - Create the files
.env.development
and.env.production
in the website root (apps/website
) and add the environment variableCMS_API
with the valuehttps://website-backend.ddev.site/wp/graphql
.
- 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.
- You have to install the following plugins to extend you Wordpress installation with GraphQL and make it accessible for Gatsby: WPGatsby and WP GraphQL.
- Create the files
.env.development
and.env.production
in the website root (apps/website
) and add the environment variableCMS_API
with the url of your local Wordpress installation (e.g.CMS_API=https://mywordpress.local/graphql
).
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
- Now, if you run Wordpress and the website in parallel, Gatsby reads all data from the GraphQL-API.
- Run
npm run serve-website
to run the website for development - 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).
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
).
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.
- Run
npm run serve-design-system
to run the design system - Run
npm run build-design-system
to create a production build of the design system
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.