windy-city-next Tailwind Templates

Windy City Next

WPGraphQL, Next.js, TypeScript, Tailwind CSS, Apollo-Client, and Headless WordPress via Amazon LightSail (Linux-Instance)

Demo Download

windy-city-next

Create Instance (Linux)

  • https://www.youtube.com/watch?v=1GsW3QUqDn4
  • LightSail is essentially a GUI built on top of Cloudfront
  • Configure Static IP and attach to newly created Instance
  • Then, go back to networking on the home page and create a distribution
    • WordPress cache behavior preset?
    • LightSail has taken configuration you'd otherwise have to do inside of Cloudfront interface and they've come up with
    • Can select various preset options based on website type (dynamic, static, best for WP, etc)
    • choose 50GB/month plan, free for first year, $2.50/month thereafter
    • if you exceed 50GB/month, then wordpress will charge you a minimum of $0.09 USD per GB over (varies by AWS Region)
    • keep distribution content pulling from origin as http if setting up from scratch (yes)
    • can reset the cache under Cache tab -- good to do if making major modifications to your WP site
  • Custom Domains
    • this is where https can be configured
    • must have a valid SSL certificate to enable custom domains
    • each wordpress instance allows for the creation of an SSL/TLS certificate
    • for example windy-city-headless.me
    • as an alternate domain, use the www.windy-city-headless.me url
    • Purchase the domain, using namecheap, for example
    • create two CNAME record for each domain with generated values (autogenerated)
    • Navigate to advanced DNS, and add two HOST RECORDS
    • this asks for a CNAME record type and gives a name and a value
    • omit the appended domain name from the name portion of the CNAME record or it will be duplicated
    • namecheap automatically appends the name of your domain onto the end of the CNAME record name
    • for the www. record, keep only the www snippet appended 👍
    • Takes 30-60min for validation to complete
    • https://lightsail.aws.amazon.com/ls/docs/en_us/articles/verify-tls-ssl-certificate-using-dns-cname-https
  • After this is validated, toggle the switch to enable custom domains
    • It will state that your distribution always serves content using its default domain name
      • xyz123.cloudfront.net
    • Copy this value, then head back to namecheap
    • add two more records
      • one CNAME record with the host having the www to denote that our subdomain will have the www prepended
      • the other as an ALIAS record to point to the root domain by Host @ (CNAME records do not support this -- womp womp)
        • both of their values should target the xyz123.cloudfront.net address of your default domain name distribution
  • ONLY TOOK 11 MINUTES (528-539) sdgjiadlfkjsd'fks
  • Do not need to use the below
  • Custom Nameservers with Namecheap
    • navigate to nameservers on the domain control panel (under domains)
    • choose "custom DNS"
    • enter the four ns- nameservers specified by amazon lightsail here
  • While this is validating, head to the home screen and create a DNS zone using your custom domain name
    • Add two A records to this, pointing at (resolves to) your distribution (distribution-1)
    • Then, create two CNAME records, and repeat the process you completed above

Building a vision on Figma

  • underway

Multilingual Support

Use .env.local variables in package.json scripts!

genql

Configuring lightsail SSL/TSL

Sitemap

@apollo/client v3: migrate from apollo-client et al. v2

HTTPS connections to Amazon LightSail HWP Server

  • Connect to Linux instance using SSH
  • Bitnami terminal opens
  • Enter the following to access wp-config.php
sudo vi /opt/bitnami/apps/wordpress/htdocs/wp-config.php
  • this opens VIM
  • enable -- INSERT -- mode
I
  • Delete the following two lines of code
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');
  • Add the following in its place
define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');if (isset($_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'])
&& $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'] === 'https') {
$_SERVER['HTTPS'] = 'on';
}
  • Save the file; press escape, then
:wq!
  • restart the apache server
sudo /opt/bitnami/ctlscript.sh restart Apache

Useful supps

Generate a random secret

  • open the terminal, type "node", hit enter
  • next, input the following:
require('crypto').randomBytes(64).toString('hex')
  • this returns a 122-character hexadecimal string

Accessing wp-config.php through bitnami in Amazon LightSail

  • open bitnami and enter
sudo vim /opt/bitnami/apps/wordpress/htdocs/wp-config.php
  • this opens VIM
  • Next, press I
I
  • this enables -- INSERT -- mode in Vim
  • proceed with editing, define GRAPHQL_JWT_AUTH_SECRET_KEY towards the bottom of the file
/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';

define('WP_TEMP_DIR', '/opt/bitnami/apps/wordpress/tmp');
define('GRAPHQL_JWT_AUTH_SECRET_KEY', '122-digit-hex-value generated using node terminal');
  • to save changes, enter
:wq!
  • to exit without saving, enter
:qa!
  • this successfully saves and exits the Vim editor
  • if no changes are required after opening the Vim editor, then
:qa!

Enable WPGraphQL JWT Authentication Plugin via WP Engine GraphiQL plugin

  • after enabling, open GraphiQL interface
mutation Login {
    login(
        input: {
            clientMutationId: "uniqueId"
            password: "insert password"
            username: "nextjsheadless"
        }
    ) {
        refreshToken
    }
}
  • this returns a refresh token value for the WORDPRESS_AUTH_REFRESH_TOKEN key in .env.local
  • set the value of the WORDPRESS_PREVIEW_SECRET key to any url-friendly string
href={`localhost:3000/api/preview?secret=${process.env.WORDPRESS_PREVIEW_SECRET}&id=${draft.id}`}

View drafts locally or on the deployed site

  • append the following relative path on the landing page url
  • /api/preview?secret=secret-path&id=target-id
  • where - secret-path = /preview-mode - target-id = id of the unpublished post (determined via phpmyadmin)
  • this will load the corresponding post
  • for example, try
https://headless-wp-next-directory.vercel.app/api/preview?secret=/preview-mode&id=22

Yosef

Domains redirecting to .io

WebManifest and fa

Top Tailwind CSS Plugins

TypeScript Maniplating React Prop Types

TypeScript Generics

nextjs-page-transitions

Configure method to reveal user ISP

Google Analytics Added

Important

  • Do not update autoprefixer to version 10 or higher

  • Why?

    • It introduces breaking changes that interfere with next's postcss-loader on yarn dev
    • Rolling back to autoprefixer@9.8.6 resolved the "true is not a PostCSS plugin" error

  • tentative flow

<Header>
WCD Logo (possibly with a group photo of us next to it)
</Header>
<Page Body>
About WCD Overview
Services short blurb with sub-page link
Projects short blurb with sub-page link
Individual Co-Founder Icons with "Abouts" sub-pages linked (Portfolio, Linked-In, About me paragraph)
</Page Body>
<Footer>
Back to top
Facebook Link
Linked-In Link
Twitter Link
Google Page Link
</Footer> (edited)

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes