A Modern Development Workflow

I want to teach you how a setup a modern, productive, and fun development workflow.

It can be overwhelming setting up the perfect development workflow. Sometimes you just want to jump right into the code.

So, here's my approach.

Code Editor

Having a light, simple code editor is ideal, but in this case, having an in-browser code editor is better.

That's why we will be setting up CodeSandbox.

Untitled efaaea82 3dd2 4ab8 a369 f811270c0115

With CodeSandbox you don't have to set up a development environment, install dependencies, or worry about tooling.

You just jump right into the code.

For now, sing up for a CodeSandbox account.

Setup

We're also going to need a place to host our web application, and Netlify is the perfect place to host it.

Start by signing up for a Netlify account, if you don't already have one.

Screen Shot 2019 04 26 at 12 c5cb7e7a 4b34 4632 a61b 2147b617f5fa 24 11 PM

Now, Netlify can connect to any Git repository hosted at GitHub, GitLab, or Bitbucket and auto-publish every time you push a commit.

In this case, we are going to use Github to host our repository and link it to our Netlify account.

Let's sign up for a Github account if you don't already have one.

Screen Shot 2019 04 26 at 1 f3ea4590 5cb5 43fd ae1f cac7b85f6677 22 54 PM

The Workflow

Now that we have our CodeSandbox, Netlify, Github accounts it's time to set up our workflow.

CodeSandbox

Open CodeSandbox and select a public template. In this case, we are going to select the Gatsby template.

Screen Shot 2019 04 26 at 1 377976e2 77e5 477f b727 d0d27206ad7b 23 53 PM

Now that we have our Gatsby template opened, we need to fork it. This will create a copy to our CodeSandbox account.

Screen Shot 2019 04 26 at 1 5f3d674b 47e7 40ec bb04 9e385702c1e7 24 47 PM

Github

We will also proceed to connect our Github account.

Screen Shot 2019 04 26 at 1 4d737bc2 5094 40af 9bc6 a1f7baaf6347 26 29 PM

Once we've connected our account we need to export our template to our account.

Screen Shot 2019 04 26 at 1 697651f1 da23 4341 b897 24892526cfac 28 23 PM

You can see now, inside of Github we have the repository of our Gatsby template.

Netlify

We will take this repository and deploy it to Netlify, by clicking on Select a new site from Git.

We proceed to connect our Github account to Netlify. This will give us access to our repositories.

We select our repository and click deploy with the default settings. It takes a couple of seconds, but once deployed you will see your site live.

Screen Shot 2019 04 26 at 1 e4c9f21a d2e4 45d0 840f e77fdb6d351d 30 26 PM

You can also set up a domain name directly using Netlify. Feel free to check out other cool features that Netlify provides. For now, let's stick to our development workflow.

Automatic Deployment

Netlify automatically starts a new deployment process every time we push a new chance to our Github repository. So let's do that from CodeSandbox!

Let's fork once again our CodeSandbox. And let's make some changes to our code and let's select the Deployment icon. Let's commit our changes by adding a subject and a message and clicking the commit or pull request button.

Screen Shot 2019 04 26 at 1 2ba69b60 5efd 4e4a 88c1 5572b3362225 35 05 PM

Now automatically the changes will be pushed from CodeSandbox to Github. And from Github to Netlify.

Congratulations! 🎉

You've just set up a productive, simple, and fun development workflow. All without install dependencies, or worrying about setting having the correct local development environment.

Summary

We learn how to set up a modern, productive and fun development workflow.

Making it easier for us to focus on coding and learning from the start.

I hope you found this tutorial useful. Until next time.

Stay awesome! 😁