Netlify Dev: Test the Netlify Hosting Platform Locally

I feel like I’ve been using Netlify ever since I switched to using static site generators from using content management systems (CMS). Initially, Netlify provided an easy-to-use service for rendering static sites, either by manual file upload or from repository code pushes. In the past two years, they added more features aimed at building fully functional sites such as serverless functions, a CMS backend, and authentication.

I spoke with Matt Billman about the history of the company, the history of the JAMStack mentality, and their new features. Hear the full interview below.

Recently Netlify added the Large Media feature which enables developers to use Git LFS version tracking for large binary files without bloating repositories — saving local dev time and speeding up builds.

Netlify Dev

Their most recent feature is Netlify Dev, a feature that introduces local testing and live stream (and sharing) capabilities, as well as the ability to test serverless functions, API integrations, and CDN Logic — everything Netlify offers is available locally on your machine.

I now have Netlify hosted sites built in a variety of static site generators and frameworks, so thought I’d see how the dev feature works with each of those. Bear in mind that the feature is in beta.

After installing the Netlify CLI with npm install netlify-cli -g, you need to authenticate with netlify login that begins a login process via your browser. If you have pre-existing sites hosted with Netlify, you link them with the cli tool using the netlify link command that can generally link the sites automatically for you by matching the Git repository.

First, I tried onedaytheworldended.com, a React-based application consisting of two pages, with a bunch of NPM modules that render a somewhat interactive site.

After linking, netlify dev --live seemed to work, but took me to a web page with a random text string, and then the Netlify CLI command output was wiped out by some linting errors generated by the react console. The dev command also used the wrong build command, and not the one I supplied in the setting of my Netlify site. Defining the build settings in a netlify.toml file fixed this, but I still had the same issue. I tried changing the build command from npm run build (used on my live site hosted with Netlify) to npm run start, but had the same problem. There’s a thread in the support forums of others with the same issue, but no resolution yet.

Next, I tried gregariousmammal.com, which is a hugo-based site. After linking, netlify dev --live worked with no problems at all, but it is a simple site.

I then tried chrischinchilla.com, a Jekyl-based site. First I had one or two Gems sourced from custom repositories I needed to checkout with bundle install. After this, I tried again and got the following error.

Waiting for localhost:4000..bundler: failed to load command: jekyll (/Users/chrisward/.rbenv/versions/2.6.2/bin/jekyll)
OptionParser::AmbiguousOption: ambiguous option: -l

Adding a netlify.toml file didn’t make any difference in this case. It looks like the Ruby command is trying to parse an argument passed to it, but despite a couple of threads that seemed related, I couldn’t resolve the issue. I am using RVM, but have defined a .ruby-version file as recommended in the Netlify docs, but still no luck.

All in all, Netlify dev looks like a potentially interesting feature to speed up the CI pipeline style workflow Netlify currently has, but it is most definitely still a beta feature. Feel free to experiment, but don’t rely on it yet. At this point, I hadn’t tried any more advanced features such as functions or redirects.

In the meantime, I can confirm that all the other Netlify features work fine, so if you have a static site that needs serving, give them a try.