This is a proof of concept website for a fictional architecture company. Built in 48 hours, this application demonstrates the use of a decoupled Drupal backend, with Gatsby static site generation and Netlify hosting. When content is created or updated in Drupal, a Netlify build hook is triggered by Drupal and Gatsby is regenerated and deployed.
View the website here: https://sam-2019-03-27-website.sam-thompson.info
git clone https://github.com/sammydigits/sam-2019-03-27.git
cd sam-2019-03-27
gatsby develop
Install Drupal 8 and the following modules:
Enable the Core serialization module, and the modules shown above.
Modify JSON API settings, change endpoint path prefix to “API”.
Add a build hook in Netlify, and configure the Webhooks module to call it whenever a node is created or updated.
Note: Login instructions for the Drupal instance have been sent via email.
// List security concerns:
// - that have been addressed
- Responses from Drupal JSON API contain sensitive information, I have limited the responses to only those containing the content required to display the website.
// - that have not been addressed
None that I am aware of.
// What could be added to the app / API?
- Gatsby doesn’t support ALT tags for images pulled from the Drupal JSON API, yet: gatsbyjs/gatsby#10339
- Multilanguage support between drupal JSON API and Gatsby doesnt work, yet: gatsbyjs/gatsby#10020
- There are upcoming improvements to the Drupal JSON API module which will rectify this, or
- Changes to Gatsby can be made, as discussed in the issue above.
- Pages created in Drupal could be automatically displayed as navigation items.
- Highlight active navigation item.
// What external libraries have you used and why?
- gatsby-source-drupal
- To allow Gatsby to use Drupal as a datasource.
- gatsby-plugin-sass
- To allow for CSS to be written in SASS, so variables, mixins, and imports can be used.
// Anything else you want to mention
The past 48 hours have been great fun! This was my first time using GraphQL and Gatsby, and I enjoyed the experience. I will be continuing to improve the application and address the issues mentioned in the improvements section above.
Note: I did not incorporate Docker or write any tests for this project, due to lack of time, and limited experience with those technologies.