To understand one of the fast growing front-end website generator, Gatsby, I decided to build my own blog with it. Before we dive in, I would like to summarize the technologies and concept behind Gatsby project.
Before we dive in..
. What is Gatsby? & Why people love Gatsby?
Gatsby is one of the fast growing front-end website generator that is geared with GraphQL and that helps developers to build a React based website fast and effeciently.
Gatsby is an open-source static website generator (SSG) that is based on the frontend development framework React and makes use of Webpack and GraphQL technology. -by Gatsby official website.
. JAM Stack
Another way to describe Gatsby is that it is one of that frameworks that is powered by JAM Stack. There are Next.js, Nuxt, and Jekyll along with Gatsby that are based on this JAM Stack. Then, what is JAM Stack?
JAM Stack stands for JavaScript, API, MarkUp Stack which simply means a website that is comprised of JavaScript, API, and Marup languages like HTML, and CSS.
Okay, I know JS, HTML/CSS, and API then what makes JAM Stack different from the traditional website then?
. Why JAM Stack is Faster, Secure, and better Scalable?
It is faster as it does pre-rendering, and it is more secure as with API, it made the server abstracted and hidden. Lastly it is scalable as it has CDN(Content Delivery Network).
For example, with the Link API built in Gatsby, it prefetch the '/about' or other pages when it render the main page and once a user clicks to move to 'about' page, it simply display the page that it has prefetched already. It improves the speed of rendering and thus user experience is improved at the same time.
Here is a simple drawing to illustrate the defference between the Traditional Web vs JAM Stack
In the traditional way, our server abstracted the data from the database or from the CMS(Content Management System) and then should got through the API and then the Web Server to diplay them to our client. Whereas, in JAM Stack clients doesnt have to wait all the time when they browse data as it already pre-rendered static pages with markup languages and then display with CDN(Content Delivery Network) to show our clients.
.Why Emotion.js ?
As for the style in this project, we are using the Emotion.js library over styled-components. The reason for this is that Emotion library bundle comes with the smallest size of memory. To install, type below command to your terminal.
npm i gatsby-plugin-emotion @emotion/react @emotion/styled
STEP1. Install "gatsby-cli" in your project
Gatsby Project will be utilising React.js, Node.js, npm as well as Git. To begin with, we need to install the 'gatsby-cli'.
% npx gatsby-cli new "gatsby-blog"
and then go into your project directory and 'gatsby develop' or 'yarn develop'
% gatsby develop
Then, you will get a message like below saying that 'you can view the page on your localhost: 8000'.
and if you go to your localhost 8000, then you will see the page like below.
so, now that you checked your main page renders and in your directory, you will most likely to have the folders like above pircture and we will arrange them and delete some unneccessary files.
In my project, I won't be using PWA I have deleted both plugins stated below.
npm remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud
In terms of directory structuring, I would have Component, Pages, Hooks, and Pages directories readt in my SRC folder, and also have a Contents directory in the root.
STEP2. Install "TypeScript" & set up the environment
As we are using TypeScript in this project, let's install 'TypeScript' and gatsby-plugin for typescript as well.
npm i typescript gatsby-plugin-typescript --dev
and then we will edit the gatsby-config file as below.
gatsby-config.js
module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, author: `@gatsbyjs`, }, plugins: [ { resolve: 'gatsby-plugin-typescript', options: { isTSX: true, allExtensions: true, }, }, `gatsby-plugin-react-helmet`, // { // resolve: `gatsby-source-filesystem`, // options: { // name: `contents`, // path: `${__dirname}/contents`, // }, // }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, // this (optional) plugin enables Progressive Web App + Offline functionality // To learn more, visit: <https://gatsby.dev/offline> // `gatsby-plugin-offline`, ], };
and then to make the tsconfig.json file, we will initialise it.
npm tsc --init
and we will make our tsconfig.json file look like this.
tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "allowJs": true, "jsx": "preserve", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "baseUrl": "./src", "paths": { "components/*": ["./components/*"], "utils/*": ["./utils/*"], "hooks/*": ["./hooks/*"] }, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true }, "include": ["src/**/*.tsx"], "exclude": ["node_modules"] }
As you may note from the baseUrl code, we set the base Url as our source folder ('./src' ) and also set the paths to our components, utils, and hooks directories. To let our local server actually access to those directories, we need to add webpack into our node.js file.
Let's open up our gatsby-node.js file and edit like below.
gatsby-node.js
const path = require('path');
onCreateWebpackConfig = ({ getConfig, actions }) => {
const output = getConfig().output || {};
actions.setWebpackConfig({
output,
resolve: {
alias: { components: path.resolve(__dirname, 'src/components'),
utils: path.resolve(__dirname, 'src/utils'),
hooks: path.resolve(__dirname, 'src/hooks'),
},
},
});
};
The important thing to note here is that we set the 'alias' option mapping our app through the path with the directory names so that our server get to the right path given in the alias.
STEP3. Almost done setting. (ESlint & prettier)
Last thing for the setting is to install ESlint and Prettier and touch some files accordingly.
npm i eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --dev
and then we will create a file '.eslintrc.json' and will put below code there.
{ "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:prettier/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module", "project": "./tsconfig.json" }, "plugins": ["react", "@typescript-eslint"], "ignorePatterns": ["dist/", "node_modules/"], "rules": {} }
for the next, go to the .prettierrc file and paste below code.
{ "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "quoteProps": "as-needed", "trailingComma": "all", "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "lf" }
We are done setting. =D