5 Minute Intro to Gatsby.JS
Whether you’re a new developer or a seasoned veteran it’s likely you’ve heard of Gatsby. However, what is Gatsby and why are so many engineers loyal to the framework? Read on to get the breakdown on Gatsby, it’s many perks, some of its cons, and learn how to get started. Let’s get going with the basics first…
What is Gatsby.JS?
So, what’s Gatsby? According to its development team, Gatsby is a free and open-source framework built on top of React! The framework bears many similarities to Create-React-App, which is an out of the box set up for starting a React Application. To put it simply though, Gatsby.JS is known to most as a web pack application.
The best part about the framework however is that it provides you with a static website, in a simple HTML file, that pre-renders your application. This means it can run anywhere!
Let’s take a look at some of the main perks of using Gatsby.js.
Why Gatsby.JS?
Incredibly fast start-up
Just like Create-React-App, all it takes is a few commands to get started in Gatsby.js. First, you’ll need to install the Gatsby.js CLI using the following command:
npm install -g gatsby-cliOnce the CLI is installed you’re halfway there. Beyond that, there are a number of starters out there to help you kick off your project. It’s really that easy to get started!
Performance Boost
As soon as you get started with Gatsby.js you’ll likely notice an increase in performance, especially in the webpack configuration. Code splitting, inline styles, and prefetching are just a few of the numerous features you can expect straight out the box. It’s also super easy to upgrade and increase performance even more with plug-ins. Gatsby’s founders claim that their sites are two to three times faster than others that are similar. As a developer, it’s nice to know that you’re getting a headstart before you even get started on your website!
Lots of Support
Gatsby’s community of developers is vast, meaning tons of resources and helpful tools out there to get started and maintain your sites. Also, since Gatsby is built on top of React you have the React community to lean on as well. If you have an issue using Gatsby, it’s likely that you’re not the first to encounter it. Upon a quick Google search, you’ll probably find a number of resources and people who’ve run into the same issue as you. This makes it super easy to debug and gives you more time to continue coding.
What’s the catch…
Is it all it’s cracked up to be?
Gatsby is known as the perfect solution for static and non-static apps, however, client-only routes require a plug-in or additional tweaks and their development team doesn’t seem to be focused on either. Many developers question whether they should use Gatsby.js or just continue with Create-React-App. There are many reasons to not be on team-Gatsby, however, the benefits sometimes outweigh the perks!
Faster = More Bugs
The Gatsby team works fast, releasing new features regularly, which makes it super exciting for you (the user)! This speed is super exciting, but also means Gatsby can be more prone to bugs since their development team works so fast. Their team has been addressing this issue by pushing automated testing to catch any bugs early. Also, as a developer, you can test your upgrades as well and downgrade back to more stable versions if needed.
How to Get Started?
Enough talk, ready to try it out? You can get started easily once you have installed the Gatsby CLI using the command mentioned previously.
Once that’s done run the following commands to create your new project, start the project, and build the project:
gatsby new gatsby-site
gatsby develop
gatsby buildAfter that, you’re all set! Happy coding :)