NextJS + Tailwind frontend for ALFM Wordpress

Static generation using Wordpress as the data source

Configuration

Step 1. Install WPGraphQL

• Download the WPGraphQL repo as a ZIP archive.
• Inside your WordPress admin, go to Plugins and then click Add New.

• Click the Upload Plugin button at the top of the page and upload the WPGraphQL plugin.

• Once the plugin has been added, activate it from either the Activate Plugin button displayed after uploading or from the Plugins page.

GraphiQL

The WPGraphQL plugin also gives you access to a GraphQL IDE directly from your WordPress Admin, allowing you to inspect and play around with the GraphQL API.

Step 2. Populate Content

Inside your WordPress admin, go to Posts and start adding new posts:

• We recommend creating at least 2 posts
• Use dummy data for the content
• Pick an author from your WordPress users
• Add a Featured Image. You can download one from Unsplash
• Fill the Excerpt field

When you’re done, make sure to Publish the posts.

Note: Only published posts and public fields will be rendered by the app unless Preview Mode is enabled.

Step 3. Set up environment variables

See .env.local, .env.staging, and .env.production

Serverless Deployment

See serverless-<stage>.yml and buildspec-<stage>.yml

WORDPRESS_API_URL=...

# Only required if you want to enable preview mode
# WORDPRESS_AUTH_REFRESH_TOKEN=
# WORDPRESS_PREVIEW_SECRET=

Setting up navigation

Internal page navigation is in components/generic/nav/master-nav.js and stored in the top_navigation variable