DEV Community: Sailesh Subramanian

My Thoughts on Decoupled Drupal with GatsbyJS |Part 1

Sailesh Subramanian — Mon, 04 May 2020 07:19:05 +0000

The past decade saw an outburst of smart devices and widely opened different channels of interaction. The front end technologies grew by leaps and bounds. GatsbyJs is a popular open-source static site generator, bundled with React, GraphQL, Webpack, to create blazingly fast websites. Let’s see how we can combine it with a popular CMS, Drupal 8.

Monolithic vs Decoupled
The typical CMS has the backend and the frontend coupled, which is monolithic. This system helped to manage and deliver the content to a huge user base. But that was years ago. The coupled system is now a hindrance as the business has to serve the varied devices and channels, adopt new front end frameworks that could give high performing websites.
Drupal has proved itself to be versatile CMS with its powerful content types and WYSIWYG editor. In the decoupled systems the presentation layer is being handled by the Javascript layer, in our case GatsbyJS. Drupal 8 serves as the content modeling, creation, and management backend with data being served in the form of API.
JAMStack systems leverage the capacity of big players Javascript, APIs, and Markups. JAMstack site with Drupal serving as a backend or headless CMS is the core of decoupled architecture.
GatsbyJS serves in the front end with the powerful GraphQL to fetch data from the Drupal backend. GatsbyJS internally uses a React code base that makes it easy for the front end developers.
A decoupled Drupal architecture offers two key advantages over a tightly coupled one.

You can use one content management system to serve multiple frontends — for example, your Gatsby site, your mobile application, and your smart TV application.
You can develop, change, and upgrade the frontend and backend independently of each other. Upgrading Drupal doesn’t require you to modify your site’s appearance. More on decoupled architecture with Gatsby in here

Let’s dive in with a short hands on
I have set up Drupal in my system using the Acquia dev desktop 2
I have created a basic page and some articles. Make sure you have JSON: APImodule enabled. This serves the JSON APIs required for the front end.

To check the JSON: API is enabled and the JSON responses are serving properly test the APIs with any clients such as postman or any other rest clients. Hit the URL http://localhost:<port>/jsonapi/node/article and you will the response JSON as below

Gatsby Setup
Install the Gatsby CLI globally using npm install -g gatsby-cli.
Create a new Gatsby site using gatsby new gatsby-site.

Move to the site folder which in our case is gatsby-site. Then go for gatsby develop. You will see the site running locally at http://localhost:8000
The initial setup of the gatsby is done. As I mentioned before, we are going to use GraphQL for fetching data instead of a typical https request. It helps to fetch multiple resources in a single fetch, unlike https requests. GraphQL is available with the Gatsby package, so you don’t have to look out further GraphQL installation. Moreover, Gatsby provides us with a playground to try out our GraphQL queries at http://localhost:8000/__graphql. To connect our Drupal site with our gatsby site, open the gatsby-config.js in the root folder. Change the base URL as below

{
      resolve: `gatsby-source-drupal`,
      options: {
           baseUrl: `http://localhost:<port of drupal site>/`,
      },
}

Let’s show the articles in our first page.
Import GraphQL and UseStaticQuery from gatsby import { useStaticQuery, graphql } from “gatsby” .
The GraphQL playground looks like below. You can parse the response JSON and bind it to HTML. Sounds simple. No actually. It took some time to correctly query the required fields for all the articles with the corresponding image. You might need some experience in getting query right as the complexity of the components increases.

GraphQL query

When you have the data available, you can easily bind it to your react components and show the data in the site.

Now let’s get going with the page we created in Drupal.

Below you will find the query to fetch the content of the page.

{
  allNodePage(filter: {title: {eq: "About US"}}) {
    totalCount
    nodes {
      body {
        value
      }
      relationships {
        field_text_with_image {
          field_text_long {
            value
          }
          relationships {
            field_image {
              localFile {
                url
              }
            }
          }
        }
      }
      title
    }
  }
}

Like before, bind the corresponding data to our react code to display the data in the about us page. An experienced person can refine the above queries further to get the data required. The main highlight of using the GraphQL instead of rest API is that you can fetch multiple resources using a single query, which in case of rest API you may have to make 2 or 3 GET requests.

Please do let me know if the article helped you. Happy coding.
Cheers !!

CSS Variables

Sailesh Subramanian — Sat, 02 May 2020 07:00:59 +0000

I learned about the CSS preprocessors 6 years back. Sass took my breath away with its awesome features, my favorite being nesting and variables. CSS preprocessor variables took away the headache of changing the theme of your web application in one go. You change the variables declared and abracadabra the whole application is painted with a different color theme. With the web world evolving we have now CSS custom properties or CSS variables.
The sad part of CSS preprocessor variables is that the browser does not recognize these static variables, yes they cannot be changed at runtime. It has to be compiled to normal CSS.

$font-color: #1a0dab;
..........
p{
color: $font-color
}

The above code written in sass will be compiled to as below , so that browsers can understand.

p{
  color:#1a0dab;
}

Though CSS variables itself is not a replacement for any CSS preprocessors, combining both could make our code sleek and DRY. You could create a CSS variable as below, beginning with two dashes (root being the global scope). However variable names cannot be a property name, say ‘padding-left’, this would end up in error.

:root{
 --text-color: #e60404;
}

The scope of changing CSS variables at runtime helps a lot in the dynamic theming of your web/hybrid applications. It also has a deeper impact on Responsive Web Design.

A quick demonstration

:root{
  --text-color: #e60404;
 }
 label{
   color: var( --text-color);
 }

--text-color is the developer defined custom property assigned with #e60404 as value. The var() function pulls the custom property written anywhere in your stylesheets and replaces it with corresponding value.
What if the CSS rules are not respected? Say I put the –-text-color as 30px; . For the element label, color value as 30px does not make any sense. In most cases, it will look for the parent element property or it will then switch to the default value which is black.

Cascading

The normal CSS cascading rules are valid in case of CSS variables.

:root{-- text-color: black;}
p{-- text -color: green;}
p.highlight{-- text -color: red;}
*{color: var( --text-color);}
............................
<div> Hi ! My text color is black</div>
<p> Hi ! My text color is green</p>
<p class=”highlight”> Hi ! My text color is red</p>

The var()

The exact syntax of var() looks like this:

var(<custom-property-name> [, <declaration-value> ]? )

custom-property-name is the developer defined property and the declaration value being the fallback value if the custom-property-name (it’s value) is invalid.
Let’s say we have

.container{
     background-color: var(--bg-color, blue);
     border-radius: var(--brdr-radius, 5px); 
}
body{
     -- bg-color: #f1f3f4;
}
// container will have border radius 5px as default value, since the --brdr-radius is not set

I got the opportunity to familiarize myself with CSS variables one year back when we are working on an Ionic 4 project. Guess what, we saw the ultimate usage of CSS variables in the web components used in Ionic 4. The idea of web component theming was made effortlessly with CSS variables.

A Web Component author can create an initial design using fallback values, and expose theming “hooks” in the form of custom properties.

Typically I can change the web component custom properties to create my own themes for the components.

Setting the custom properties in run time

The setProperty() allows us to manipulate the custom properties in runtime.

:root{
    -- text-color: red
}
p{
  color: var(--text-color);
}
// inside the javascript
element.style.setProperty('--text-color', ‘blue’);

Browser support

Latest versions of all modern web browsers support CSS variables.
Google chrome 😄
Safari 😄
Microsoft Edge 😄
Firefox 😄
IE 11 😢

Happy coding , enjoy quarantine !!

Webpack 4 : Quick Start Guide

Sailesh Subramanian — Fri, 27 Mar 2020 06:59:37 +0000

Webpack is one of most commonly used module bundlers available now. It eases the developer's job and provides blazing fast performance coupled with amazing features. From the days of task runners like Grunt and Gulp to Module Bundlers , front-end application development has never been so easier and engaging as today.

"Webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles"
Read the core concepts from here

Please note that the sole purpose of this article is to help to quickly build a neat webpack build configuration for a webapps. If you are more interested in learning the basics/core concepts of webpack please refer the above mentioned link to get to know about core concepts of webpack.

Let's Dive in

Create a directory
```
mkdir webpack101 && cd webpack101
```
Use NPM or Yarn for package management
```
npm init
```
OR
```
yarn init
```
It will generate the package.json file. Yarn is my favorite , so throughout in this guide yarn will be used.
Install webpack locally(recommended)
```
yarn add --dev webpack webpack-cli 
```
You can see the webpack being added as dev dependencies in package.
Now lets create a sample project with our usual stuffs.You can find the source files here

Now the project structure is ready let's bring in the main player
webpack.config.js. Create the webpack.config.js in the root.

Now that the initial configuration is ready,lets modify our package.json to add the build command.
Now let's run the build command
```
yarn build
```
We now have a bundle.js inside the dist folder.For the sake of cache busting , include [chunkhash] in the output js file configuration of webpack. So each time the generated js file will be in the format bundle.[chunkhash].js.

Naturally our dist folder will be cluttered with many files. So we need to add
clean-webpack-plugin.

     const { CleanWebpackPlugin } = require('clean-webpack-plugin');
      ......

      plugins: [
         new CleanWebpackPlugin(),
         ....
      ]

But that does not the serve the whole purpose. So let's add more to the webpack.config.js.

Working with ES6
Let's modify our index.js and add some behaviour using ES6. Since the code is in ES6 we need to transpile it so that the browser can understand. Here loaders come for the rescue, and do the code transformation for us.

Adding Babel to the project. We specify the rules in the module section to add the each loaders in webpack.config.js. The test property identifies which file or files should be transformed. The use property indicates which loader should be used to do the transforming.
```
yarn add --dev babel-loader @babel/core @babel/preset-env
```
Modify the our webpack.config.js as below.

    module:{
        rules: [
            {
              test: /\.(js|jsx)$/,
              exclude: /(node_modules)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ["@babel/preset-env"]
                }
              }
            }
        ]
    }

Add a .babelrc file with contents as below.

     {
        "presets": [
           "@babel/preset-env"
         ]
      }

But how do we see the magic happening? So let's add the webpack-dev-server to run the project locally.

yarn add --dev webpack-dev-server

Also modify the package.json the script to run the dev server and then run yarn serve.

    "serve": "webpack-dev-server --open --config webpack.config.js"

With the css preprocessors taking the significant role in the web development these days , lets create sass files and add loaders to transform and bundle it.
```
yarn add --dev style-loader css-loader node-sass sass-loader
```
The mini-css-extract-plugin helps us to extract all styles and bundle it in our dist directory. Use MiniCssExtractPlugin.loader instead of style-loader if you need a separate bundle.css file as the style-loader injects all the styles in the head element of your html.
```
yarn add --dev mini-css-extract-plugin
```
Add the loaders to our webpack.config.js as below.

        const MiniCssExtractPlugin = require('mini-css-extract-plugin');
        ......
         plugins: [
                new MiniCssExtractPlugin({
                    filename:"bundle.[chunkhash].css"
                }),
                ....
          ]

         .....

        {
                test: /\.(sa|sc|c)ss$/,
                use: [

                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }

Now comes the role of plugins. We need to modify our HTML files, copy some of the assets to build folder and so on and to do that we need to add certain webpack plugins.

Adding HtmlWebpackPlugin , it generates an HTML file with generated bundle files,both js & css, integrated in the script and link tags. We can even specify the template as well.
```
 yarn add --dev html-webpack-plugin
```
Now modify our webpack.config.jsto add the plugin.

    var HtmlWebpackPlugin = require('html-webpack-plugin');
     .............

     plugins: [new HtmlWebpackPlugin(
        {
          title: 'My App',
          template:'./src/index.html',
          'meta': {
              'viewport': 'width=device-width, initial-scale=1, user-scalable=no'
           }   
       }
     )]

What about assets like fonts, images..Let's add copy-webpack-plugin. The
reason why file-loader was not used because it loads on those assets
referenced in our modules.

yarn add --dev copy-webpack-plugin

Add the configurations for the plugin as well inside webpack.config.js.

   const CopyPlugin = require('copy-webpack-plugin');

   new CopyPlugin([
           { from:'./src/assets', to:'assets'   }
        ])

And finally all our assets are copied to build directory.

Preparing for Different environments

We could actually maintain separate webpack comfiguration files for
development and production deployment, with production files having
production configurations included.

Let's create webpack.common.config.js. Remove all the contents from the
current webpack.config.js and paste it in the new file.Change the output path
options as path:path.resolve(__dirname, '../dist'),

Add the below script in the webpack.config.js to configure different
environments.

    const webpackMerge = require('webpack-merge');
    const commonConfig = require('./webpack.common.config.js');
    module.exports = ({ env }) => {
      const envConfig = require(`./webpack.${env}.config.js`);
      return webpackMerge(commonConfig, envConfig);
      };

Make sure you have the webpack-merge yarn added as dev-dependency.
Now we can to create webpack.dev.config.js and webpack.prod.config.js.
Include the development specific feature config in the webpack.dev.config.js
as below.If they existed in your webpack.common.config remove it to avoid
unexpected results.

      module.exports={
        mode:"development",
        devServer:{
          port:3000,
          hot: true,
          contentBase:'./dist'
       },
       devtool:"inline-source-map"
      }

Same for the webpack.prod.config.js. I leave up to you if you require source-
map in prod mode.

     module.exports={
       mode:"production",
       devtool:"source-map"
     }

Modify the scripts to run for different environment in package.json to look
more meaningful.

     "scripts": {
     "serve": "webpack-dev-server --open --config build-config/webpack.config.js 
              --env.env=dev",
     "build:dev": "webpack --config build-config/webpack.config.js 
                  --env.env=dev",
     "build:prod": "webpack --config build-config/webpack.config.js 
                  --env.env=prod"
      }

You can again go for optimization techniques available with other webpack
plugins in the production mode. Since v4 webpack does the optimization for
you based on the mode. But you can override those with your own
configurations. uglify-js , optimise-css-assets are most popular.

Thanks for reading.I hope that was informative .If you have any corrections or
suggestion, please let me know in the comments section. Happy Coding !!