DEV Community

Strapi
Strapi

Posted on

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

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.

Example 2:

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.

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:
npm install netlify-cli -g  
netlify login
2. Authorize the sync by pressing one button.
3. Initialize and set-up you project:
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
4. Git push the additional Netlify config files and open 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.

Top comments (1)

Collapse
 
lardissone profile image
Leandro Ardissone

I can't wait to see a way to host a Strapi version that can be uploaded to a serverless solution (Zeit's Now, AWS, etc). This would be a really game changer.