Or how we re-did one of our "Learning how to use Gatsby with Strapi" tutorial video in no time thanks to the release of the new Netlify Beta Dev CLI.
May 16, 2019
If you're a web developer these days, then it is nearly a certainty that you have heard of Netlify. In fact, chances are you actually tried their starter plan or even already use them. What you have perhaps not heard of, and it’s understandable with the distraction of another icon for developers joining Netlify and all…, is their new Dev CLI (Beta).
In the recent tutorial series we released, Learning How to Use Strapi with Gatsby, we even created videos to go along. In one video, we show how easy it is to deploy a Gatsby site on Netlify. But on April 18, 2019, a different video was scheduled to go up. The scheduled video was about the same thing, but I showed a different way to do things. The reason the video changes is because after lunch that day, I received an email announcing the Keynote by Netlify CEO Matt Biilmann, and herein he announces the new Beta Netlify Dev CLI.
After a quick huddle with the team, we decided everything just had to be re-recorded (using Netlify Beta Dev CLI Dev as opposed to Browser navigation instructions) and with truckloads of shouldn't-be-legal energy drinks available, I was prepared to spend a very very long night doing just that.
But even though I received the email at 1:05pm - I was able to record, edit, document and go home on schedule. Because using the new Netlify Dev CLI is just faster, more efficient and therefore easier to use, easier to talk about and easier to teach.
This article is not really a tutorial on using Netlify or the Netlify Dev CLI. Netlify already has excellent documentation. No, in this article I will give you a couple examples of the difference of To Be or Not To Be (using Netlify Dev CLI) and hope that you will then take the next steps and at least try out Netlify, with for example, an incredible, fantastical, magical combination of Strapi, Gatsby and Netlify.
Save a few clicks when you open your site, after pushing your changes:
The Netlify Dev CLI Way
git push netlify open:site
Note: It is entirely possible that you have to refresh your browser as you might beat the redeployment by Netlify by a few seconds or so. It's possible.
If you want to check the hooks you're using. And let's say you have a typo. Check this out:
netlify hhoks › Warning: status:hhoks is not a netlify command. Did you mean status:hooks? [y/n]: y Site Hook Status │ ─────────────────┘ site: strapi-gatsby-postgresql-demo hooks: 5ccc790da0118e8a5b: type: github_commit_status event: deploy_created id: 5ccc790da0118e8a5b disabled: false repo_url: https://github.com/davidkartuzinski/strapi-gatsby-postgresql-demo 5ccc790fc3c6bcba0a36: type: github_commit_status event: deploy_building id: 5ccc790fc3c6bcba0a36 disabled: false repo_url: https://github.com/davidkartuzinski/strapi-gatsby-postgresql-demo
Did you catch that? Not only does it catch your typos but makes continuing a simple "yes" or "no" affair.
In the tutorial I just finished, after initial account creation on Netlify, I only had to make four easy steps to host an entire website! Basically, I finished the work on the actual website, locally. Next, I need to push the final changes to GitHub. Below is how easy it was with the Netlify CLI Dev, to host a Strapi powered Gatsby site: ######1. Install Netlify CLI Dev and login to your account:
npm install netlify-cli -g netlify login
netlify init ? What would you like to do? + Create & configure a new site ? Site name (optional): ? Team: YOUR NAME HERE Site Created Admin url: https://app.netlify.com/sites/SITE-NAME Site url: https://SITE-NAME.netlify.com Site ID: YOUR-UNIQUE-SITE-ID ? Your build command (hugo/yarn run build/etc): gatsby build ? Directory to deploy (blank for current dir): public ? No netlify.toml detected. Would you like to create one with these build settings? Yes Creating Netlify Github Notification Hooks... Netlify Notification Hooks configured! Netlify CI/CD Configured! The site is now configured to automatically deploy from github branches & pull requests. Next steps: git push Push to your git repository to trigger new site builds netlify open Open the Netlify admin URL of your site
git add . git commit -m "netlify config settings files" git push netlify open
Now, whenever I update GitHub, Netlify automatically updates the changes live within a few minutes. All of this is done within the Netlify CLI Dev. The truth is that even browser based clicking around is a charm with Netlify. They have an excellent UX and obviously care very much about the experience of their users. And if all this newness and awesomeness really perturbs you, and you miss the Uploading File Monster, don't worry, Netlify has your back.