Gatsby with WordPress - Workshop
Pune WordPress Knowledge Exchange
Pune WordPress Knowledge Exchange
Public group
Saturday, June 13, 2020
5:00 PM to 6:30 PM GMT+5:30
Add to calendar
Online event
https://rtcamp.zoom.us/j/95875644116
Details
Online Meetup:
Speakers:
1. Sayed Taqui - Sr WordPress Engineer @rtCamp
2. Imran Sayed - Sr. WordPress Engineer @rtCamp
3. Sagar Nasit - Sr. WordPress Engineer @rtCamp
As developers or users, we all are concerned about our site's performance. ⚡
We sometimes have to face fierce battles ⚔️ to get our sites, just a few milliseconds faster
Gatsby, a modern blazing-fast static site generator for React.js, is gaining popularity ❤️ because of its performance, developer experience, and ecosystem. It follows Google's PRPL architectural pattern to boost your website's performance.
http://bit.ly/2M14Jks
Building your WordPress website with Gatsby is super simple.
Let's learn how to build a WordPress website with gatsby in this Workshop.
Gatsby is a static site generator. However can it serve live data too?
Should we use GraphQL over traditional REST API and why?
How does Gatsby improves the performance?
Can also build an ecommerce site with Gatsby?
Find out more about this in this meetup.
In this meetup, you will learn:
1- Basics of Gatsby
2- Understanding the architecture and codebase.
2- Building a WordPress website using Gatsby.
3- Using GraphQL with Gatsby and WordPress.
4- Free deployment of your Gatsby website on netlify
Prerequisites:
Prior knowledge of React or WordPress is not required.
Familiarity with JavaScript is sufficient.
Sayed, Imran and Sagar will also share their experience and best practices, when building site with Gatsby.
There will also be a QnA session where you can ask any questions you may have and also share your experiences.
Whether you are a beginner, intermediate or expert, this meetup will have something for you.
This is an online meetup so you can sit, relax and enjoy meeting everyone online from wherever you are.
2. ● Decoupled
● Gatsby and its features
● Use Gatsby Theme
● Create Gatsby Theme
● Hybrid Pages and Live queries
● Deployment
● WooCommerce with Gatsby
18. Gatsby uses PRPL Pattern
⬡ A web site architecture developed by Google for
building fast performance websites.
⬡ Push critical resources for the initial URL route using
<link preload> and HTTP/2.
⬡ Render initial route.
⬡ Pre-cache remaining routes.
⬡ Lazy-load and create remaining routes on demand.
18
19. PRPL Pattern
19
Static html
version
of initial Route
Code bundle
for the pages
Renders Loads Precaching
Resources for
pages linked to
from the initial
route
Link Clicked
Create New Page on
Demand
20. How does Gatsby work?
⬡ Gatsby core automatically turns React components in
src/pages into pages with URLs
⬡ src/pages/about.js will be available at ‘/about’
20
22. Features
⬡ Pre setup of modern web tech - React, Webpack,
Modern JavaScript and CSS.
⬡ Bring data from one or many resources.
⬡ Builds your site as “static” files which can be
deployed easily on dozens of services.
22
23. Features
⬡ Pre-build pages and lift them into a global cloud of
servers — ready to be delivered instantly to your
users wherever they are.
⬡ Content is compiled ahead of time so hackers cannot
get into your database or CMS.
⬡ PWA Generator
23
27. Gatsby Files
⬡ gatsby-config.js — configure options for a Gatsby
site, with metadata for project title, description,
plugins, etc.
⬡ gatsby-node.js — implement Gatsby’s Node.js APIs
to customize and extend default settings affecting
the build process
⬡ gatsby-browser.js — customize and extend default
settings affecting the browser, using Gatsby’s
browser APIs 27
28. How does gatsby-source-graphql work?
⬡ Plugin for connecting arbitrary GraphQL APIs to
Gatsby’s GraphQL
⬡ Remote schemas are stitched together by declaring
an arbitrary type name that wraps the remote
schema Query type , and putting the remote schema
under a field of the Gatsby GraphQL query.
28
29. Hybrid App Pages
29
Created pages can
make calls to external
services and APIs in
order to allow more
interactive and
dynamic behavior
31. What is Gatsby Theme?
31
- Little more than a gatsby site.
- Gatsby theme is pre configured gatsby site with all
functionality and UI.
32. Benefits of Gatsby Theme
32
- One theme functionality can be used at multiple
places.
- Can be used as packaged version.
- Multiple themes can be used to leverage multiple
functionalities.
34. Use gatsby woocommerce
theme
34
- Install wp-graphql-woocommerce extension plugin
with wp-graphql plugin on your WordPress site.
- Install gatsby theme package.
35. What Ecommerce theme
includes
35
- Fetched products data from woocommerce site.
- Creates individual product page as well as product
listing pages.
- Cart handling with offline viewing.
Imran will introduce@sayed is a full stack developer and works on front-end and WordPress.
Imran will introduce@sagar Write you bio here
Imran will introduce@Imran Write you bio here
Imran- What is decoulpled architecture and why should someone build a decoupled site -Sayed’s Answer-
Sayed
Sayed
Imran will talk about the options available for Front-end development:1. Vue
2. React
3. AngularJs
Imran - Why are the advantages of using React? Sayed’s Taqui’s Answer -
Imran - Why/when should we framework?Sayed’s Taqui’s Answer -
sayed
Sayed
Imran- What is Gatsby? -
Sayed’s Answer:
Go to next slide.
Sayed
Imran will explain
Imran will explain
Imran will explain
Imran will explain
Imran will explain
What are the key features gatsby offers? Sagar answer
Sagar
Configuration setup for modern web tools like React, babel, webpack is a headache sometime, especially for a newcomer. Gatsby takes care of all configuration and you can start off immediately with gatsby.
Content Mesh: using multiple dataspaces like WordPress, drupal, Shopify gatsby brings data from those places and stitches into single layer of graphql from where you can query your data.
You can deploy your site with services like netlify, vercel and github pages. Deploying gatsby site is one of the fastest and easiest.
SagarIt’s just static files, so we can use CDNs to which are more faster then traditional servers.
In normal sites, you may have database connections or a dashboard like wp-admin, but in gatsby it’s only static files that avoid any possibility of database attack, We can use CDNs that can prevent DDoS attack.
Some of the features like blurred image lazy loading, offline viewing and Progressive web apps, prefetching links are single plugin away. You can install plugin bring those features into your site.
Imran -Why should we use WordPress as a backend, can we not build our backend in the node itself, since we are using JavaScript in the front?Sayed’s Answer -
Imran -Why should we use WordPress as a backend, can we not build our backend in the node itself, since we are using JavaScript in the front?Sayed’s Answer -
Imran will explain how Hybrid Pages will work
Sagar - as Imran has shown you how to build a gatsby theme let me tell you more about it.
Gatsby themes allow Gatsby site functionality to be packaged as a standalone product
It is actually a preconfigured gatsby site with all functionality and UI, for example, if you install any blog theme with WordPress, it will handle querying data from WordPress, creating blog pages, paginations, all these things can be used in single gatsby theme package.
You can create multiple sites that consume the same theme.
To updates across those sites, you can update the central theme and update the version in the sites through package.json.
You could install a blog theme alongside an eCommerce site,we can use multiple themes to get multiple functionalities in single gatsby site.
Imran - What about wooCommerce? Can we also build at a WooCommerce theme using Gatsby?
Sagar’s response:
Ecommerce with woocomerce is possingle with wooGraphql plugin.
Install gatsby theme.
Imran - What about wooCommerce? Can we also build at a WooCommerce theme using Gatsby?
Sagar’s response:
Ecommerce with woocomerce is possingle with wooGraphql plugin.
Install gatsby theme.
I will share my screen for demo and after that rest of the questions from the Google doc.
Demo of woocomerce store
2. Are these products statically rendered and why?
Products are statically rendered.
provide offline and fast viewing support, security
3. How is the add to cart being handle? Is that making a live query?
Handling cart with localstorage.
For live queries we can use apollo graphql with wpGraphql
Demo of next app.
4. What if we want to make a live add to cart feature how will work?
Live query with apollo graphql
Imran’s next app discussion.
5. How to handle payment gateways?
stripe API.
redirect user to external ecommerce site.
6. How will My Account page work?
WordPress Rest API basic auth
JWT authentication with graphql
7. Can you extend wp-graphql ?
wpGraphql supports scaler types
We can create custom object type.
8. How will coupons and discounts work?
can be stored in localStorage
Can be validated on live queries.
9. How will taxes function?
Very similar to how we handle couponse.
10. Can we use any WooCommerce plugins?
Very restrictive use.
We can use plugins that provides rest or graphql supports.