Gatsby, TypeScript — Live!

🎡 Boosting SEO, PWA out of the box

👘 Introduction:

Gatsby is a free and open-source framework based on Facebook React JavaScript Library that helps developers build blazing-fast static websites and dynamic applications. I am now rewriting my web application into GatsBy. Time Starts 4:38 PM CST, Sunday, Feb 14th.

⛳️ Goal:

1. Supply the data through .md files
2. Generate the pages and deploy them.
3. Convert the project to TypeScript
4. Isolate the site configuration
5. Use the SCSS instead of CSS

🚶 Prerequisite:

1. NPM must be installed.
2. VisualStudioCode or similar IDE is required.

🏃 Quick Start:

Download and Install Gatsby CLI.

🍁 npm i gatsby-cli -g

A successful installation

🍁 gatsby new allibilli

It may take a while on your first attempt. Get into the allibilli folder and run the following command.

🍁 gatsby develop

In case, If you see the below error:

‼ pngquant pre-build test failed --> means you need to do an explicit step: Downgrade the version.
ouldn't find the "gatsby-transformer-sharp" plugin declared in "XXXXX/gatsby-config.js".
🍁 npm install imagemin-pngquant@5.0.1 --save

Terminate the job CTRL/CMD+C and run

🍁 code .

Opens VisualStudio Code. Observe — the highlighted lines.

Now, Let's convert this into a TypeScript Project:

Install TypeScript at first:

🍁 npm install -D typescript

Install the Gatsby Plugin:

🍁 npm install -s gatsby-plugin-typescript

🙇 Let’s isolate the configuration. Create a config folder and config.js with the following configuration. Customize as needed and supply all the custom configurations from this file. If needed you can modularize them further. The configuration is one of the most important and experienced developers never miss it.

Below is how the gatsby-config file looks like with the configuration and `gatsby-plugin-typescript` is added to the Plugins Section.

🙇 Check the Package.json:

🙇 Now add the tsconfig.json: This is the file that has the TypeScript Configurations explaining the compliance with the transpiler.

🙇 Now add the tslint.json: is an extensible static analysis tool causing your build to transpile successfully upon verifying the code for readability, maintainability, and functionality errors. You can force the developers to follow the code guidelines having a contract defined in this file.

Let’s run the application (npm run develop). It should be running fine having both JSX and TSX files if you add any (Of course no TSX files added by us yet).

Now — It's the time to rename the file extensions to having TSX and build it using “npm run develop” and you should be able to up and running the application as it is.

haigopi/allibilli-gatsby

Clone the above repo. run “npm install” and then run “npm run develop”. You are all set to start a typescript Gatsby Application.

🎌 Generating the HTML files for the content. Data is driven by MD files:

1. Make sure the following NPM Libraries were added to your package.json

npm install —-save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-transformer-remark gatsby-plugin-typegen gatsby-plugin-catch-links gatsby-remark-smartypants gatsby-remark-prismjs gatsby-remark-images gatsby-remark-copy-linked-files gatsby-plugin-typography gatsby-plugin-manifest prismjs ramda graphql-tag-pluck gray-percentage lodash lunr normalize.css regenerator-runtime graphql gatsby-plugin-feed gatsby-plugin-emotion gatsby-plugin-lunr gatsby-plugin-netlify gatsby-plugin-nprogress gatsby-plugin-sitemap

2. Add the “mdx” plugin first inside the gatsby-config:

Observe the Remark Plugin and make sure it is declared with the internal plugins.

Find other articles @ my publication: ThinkSpecial