Code Monkey home page Code Monkey logo

gatsby-drupal-kit's Introduction

This a Drupal 8 gatsby V2 starter kit designed to work out-of-the-box (more or less) with a standard drupal 8 install profile. Currently a work in progress.

Drupal site: http://dev-drupal-gatsby.pantheonsite.io/ Gatsby site: https://master--clever-gates-db60f2.netlify.com/

Gatsby Setup (required)

  1. Fork, download, or clone this repo. It shouldn't matter where you put it. (no vm/mamp nonsense needed).
  2. Using the command line, cd to the root of this repo. Run "npm install." (google "install node" if this doesn't work)
  3. Install gatsby-cli. Command is "npm install --global gatsby-cli"
  4. From the root directory of the repo, run "gatsby develop." Once the setup process completes, you can start working with the site at http://localhost:8000. For the most part, the compiler will process code changes in ~1 second. Change some code, and your browser should actually automatically refresh!

Drupal 8 setup (optional)

  1. You'll need drupal to be hosted remotely, and be accessible via the web (I'd recommend setting up a free https://pantheon.io/register drupal 8 site for testing this if want to save time!)
  2. Install a standard profile
  3. Download and enable: webhooks, ctools, token, pathauto, and jsonapi
  4. Install GraphQL. Note this must be done via composer (run "composer require drupal/graphql" from drupal 8 root
  5. IMPORTANT Disable the contact form module (long story...)
  6. Configure "anonymous" role to have access to jsonapi in the permissions page.
  7. Configure automatic paths for taxonomy term tags, and articles (otherwise, just be sure to give your tags and articles url aliases)
  8. Create an article that includes an image, and a tag

Connect the sites (optional)

  1. At the root of the gatsby repo, edit "gatsby-config.js"
  2. Replace "http://dev-drupal-gatsby.pantheonsite.io/" with your site's publically accessible url

Setup a live CI enviroment (optional)

  1. Sign up for a free netlify.com account
  2. Connect your github repo (forked or cloned from this code)
  3. Select "gatsby" as the platform
  4. Create a webhook in netlify
  5. Configure drupal to fire the webhook to that url on content updates

By this point your netlify gatsby site will auto-update anytime you push to master branch, or update content in drupal. When working locally, you'll have to shut down "gatsby develop" and restart it for content changes to take effect.

What's the big picture? Here's a list of articles to jumpstart your understanding:

  1. "Composition vs Inheritance." A simple rejection of traditional object oriented conventions for the frontend https://reactjs.org/docs/composition-vs-inheritance.html
  2. "Thinking in react." Just read and accept the way: https://reactjs.org/docs/thinking-in-react.html
  3. Differences between graphql and REST: https://blog.apollographql.com/graphql-vs-rest-5d425123e34b

gatsby-drupal-kit's People

Contributors

alexu-a avatar nicklewisatx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gatsby-drupal-kit's Issues

Standardize CSS approach

Styled components makes most sense to me, but also want to keep the sass option open with an example. Remove some of the stranger approaches inherited from original example.

Put together essential resource and concept list.

Beyond setup, there's some react/gatsby stuff that isn't going to be immediately clear to newcomers. Current version does not attempt to give clarity on that. Make a required reading section in README

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.