Netlify Dev - Netlify on Your Local Computer

By James Quick (@jamesqquick)

Netlify is never short on new and exciting features. At JAMstack Conf in New York City, they lived up to the hype again. Netlify announced Netlify Dev, allowing you to "run [our] entire platform on your laptop". Let's see it in action.

"Preview it all - site generation, functions, and edge logic."

Getting Started

To use Netilfy Dev, you'll just need to add one npm package globally on your machine. If you already have this package installed you may need to update it.

npm install netlify-cli -g

With the package installed, inside of your website directory, you can run the following command. 

netlify dev --live

When you run this command, it will automatically figure out how to run your website. This works for the following types of static sites.

  • Gatsby
  • Hugo
  • Jekyll
  • React Static
  • Eleventy
  • and MORE!

After running the command, you can see it figured out it needed to run *gatsby develop *to run my site.

Connect A Netilfy Site

Connecting to an existing Netlify site is easy by running the following command.

netlify link

You could also run *netlify init *if you don't already have a site deployed on Netlify. Since my site is connected through my Github repository, I can tell it to do that.

Authentication

You might have to authenticate to Netlify to continue.

Environment Variables

Another thing to notice in my logs is that it included an environment variable. It's actually injecting that environment variables from the deployed website into the local build. I use this variable on my site to handle email subscribes. This means you might not ever need local environment properties defined.

Note - I still have an open question of whether you can separate between dev and production environment variables

At the end of the log output, you can see my site started up successfully.

Stream Your Development Server Live

Another piece of the logs that we haven't touched on yet is the fact that my "development server" is available globally.

And if I go to that URL, I can see my site is actually available!

Netlify Functions

One last built in feature of using the netlify dev command from above is that is also runs/serves your lambda functions. If you look closely at the logs, you'll see two "connected" messages. One is for your site and the other (the first one below) is for your Netlify Functions.

Testing the Function

Thanks to this I can no go to postman and test my *subscribe *function which accepts an email, validates it, and sends it off to Mailchimp to add to a mailing list.

As you can see in the screenshot below (although it might be small), I sent a post request to *localhost:34567 *(the port for my Netlify Functions), and got a response back!

Conclusion

Netlify continues to impress. Netlify dev definitely has some awesome features that are exciting for the future of static site development. I'm excited to see where they go from here and how they continue to improve in everything they do and provide.