A true story about Strapi and the new Netlify Beta Dev CLI

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.

Example 1:

Save a few clicks when you open your site, after pushing your changes:

The Netlify Dev CLI Way

1git push
2netlify 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.

Example 2:

If you want to check the hooks you're using. And let's say you have a typo. Check this out:

1netlify hhoks
2›   Warning: status:hhoks is not a netlify command.
3Did you mean status:hooks? [y/n]: y
4Site Hook Status │
5─────────────────┘
6site:  strapi-gatsby-postgresql-demo
7hooks:
8  5ccc790da0118e8a5b:
9    type:     github_commit_status
10    event:    deploy_created
11    id:       5ccc790da0118e8a5b
12    disabled: false
13    repo_url: https://github.com/davidkartuzinski/strapi-gatsby-postgresql-demo
14  5ccc790fc3c6bcba0a36:
15    type:     github_commit_status
16    event:    deploy_building
17    id:       5ccc790fc3c6bcba0a36
18    disabled: false
19    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.

Example 3:

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:

1npm install netlify-cli -g  
2netlify login

2. Authorize the sync by pressing one button.

3. Initialize and set-up you project:

1netlify init  
2? What would you like to do? + Create & configure a new site
3? Site name (optional): 
4? Team: YOUR NAME HERE
5
6Site Created
7
8Admin url: https://app.netlify.com/sites/SITE-NAME  
9Site url:  https://SITE-NAME.netlify.com  
10Site ID: YOUR-UNIQUE-SITE-ID
11
12? Your build command (hugo/yarn run build/etc): gatsby build
13? Directory to deploy (blank for current dir): public
14? No netlify.toml detected. Would you like to create one with these build settings? Yes
15
16Creating Netlify Github Notification Hooks...  
17Netlify Notification Hooks configured!
18
19Netlify CI/CD Configured!
20The site is now configured to automatically deploy from github branches & pull requests.
21
22Next steps:
23
24  git push       Push to your git repository to trigger new site builds
25  netlify open   Open the Netlify admin URL of your site

4. Git push the additional Netlify config files and open your site:

1git add .  
2git commit -m "netlify config settings files"  
3git push  
4netlify 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.