Recommended
More Related Content
More from Imran Sayed
More from Imran Sayed (14)
Recently uploaded
Recently uploaded (20)
Gatsby with WordPress - workshop ( Meetup
- 1. Build WordPress Site With Gatsby - Workshop 1
- 2. ● Decoupled ● Gatsby and its features ● Use Gatsby Theme ● Create Gatsby Theme ● Hybrid Pages and Live queries ● Deployment ● WooCommerce with Gatsby
- 6. What is decoupled? Why decoupled?
- 10. Why React?
- 11. Why a framework?
- 12. Gatsby vs Next JS vs Create React App 12
- 13. Nextjs 13 Gatsby - SSR ⬡ Dynamically rendered ⬡ Create Routes manually ⬡ Does CSR Create React APP
- 15. ● Open source framework based on React ● build blazing fast websites and apps
- 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
- 21. Features 21
- 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
- 25. Building Websites with Gatsby and WordPress 25
- 26. Creating Gatsby Site with WordPress 26
- 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.
- 33. Can we build WooCommerce Theme? 33
- 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.
- 36. References 36
- 37. Thank you 37 @sayed_taqui - Sayed taqui @sagarnasit - Sagar Nasit @imranhsayed - Imran Sayed
Editor's Notes
- Imran
- 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.
- Sagar It’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.