Note: This is a crosspost from my blog. Find the original article here: https://owenconti.com/devops/my-experience-with-netlify-dev-after-a-couple-hours-using-it/
Netlify Dev was announced this morning, April 9, 2019.
In short, it allows you to run Netlify's environment (builds, static hosting, functions, redirects, etc) on your local machine. Once running, it also allows you to open a tunnel to the public internet to access your project (think ngrok).
For more information on its features, and how it works, I recommend reading the GitHub repository README: https://github.com/netlify/netlify-dev-plugin.
Netlify Dev attempts to automatically detect which type of frontend project you have and runs the corresponding command to start the dev server for you. You can find a list of projects it can automatically detect here: https://github.com/netlify/netlify-dev-plugin/tree/master/src/detectors.
Custom commands
If you're running a project not listed at the link above, you can tell Netlify what command to run via the netlify.toml
configuration file. For example, this blog is built with NextJS, however I run a wrapper around NextJS called Nextein. Since I have to run Nextein instead of NextJS for my development server, I need to tell Netlify Dev:
[dev]
publish = "out"
port = 3000
command = "npm start"
- The
[dev]
block tells Netlify to use these settings with thenetlify dev
command - The
publish
value tells Netlify which directory has our_redirects
file - The
port
value tells Netlify which port our development server runs on - The
command
value tells Netlify which command to run to start our development server (only needed if running a project not yet detected by Netlify)
Environment variables
This is where I've run into the most trouble while trying to use Netlify Dev.
In one of my projects I have a couple environment variables that need to differ between my production deployment and my local environment. For example, the callback URL I pass to Twitter during the OAuth authentication flow.
In production, I set these variables via the "Build environment variables" section in the Netlify UI. In development, I use the dotenv package and a .env
file (which is ignored by Git) to set the environment variables locally.
Before Netlify Dev was released, I was using the netlify-lambda package to run my functions locally. With this setup, my environment variables were working perfectly fine.
However, after switching to netlify dev
and running the netlify link
command to link my local project to the project in Netlify (linking the projects allows Netlify to pull the "production" environment variables from Netlify down to your local machine to use with netlify dev
), my local .env
overrides no longer work. It seems Netlify Dev is preventing the dotenv
package from overriding the process.env
values.
I left a comment on a related issue on their GitHub repository, so hopefully they can get back to me with an answer on that.
Summary
In summary, I think Netlify Dev is a great product which will simplify the developer experience when a developer takes advantage of Netlify's full product suite. If a developer is just using the static hosting portion of Netlify, I feel Netlify Dev provides little value. But as soon as you start using Netlify's Functions or _redirects
features, Netlify Dev makes complete sense.
I do hope they sort out the environment variables issue soon, however.
Top comments (0)