How to Run .NET on Heroku

.NET Core continues Microsoft’s shift towards a more open development philosophy. It is open-source and cross-platform. With a little bit of setup, you can get a .NET Core web app running on Linux-powered Heroku. This guide will walk you through it.

This guide is catered for development on Windows, even though the resulting web app runs on Linux via Heroku. .NET Core (the framework) is cross-platform, but Visual Studio (the IDE) is not… yet. However, there are solutions for running Visual Studio on Mac.

.NET Core and Heroku logos

Prerequisites

Make sure you have all of the following prerequisites ready to go.

Create the Solution

Fire up Visual Studio, then go to File > New > Project.

Navigate to Installed > Templates > Visual C# (or Visual Basic, if that’s your thing) > Web. Select ASP.NET Core Web Application (.NET Core). Pick your Name (I’m using “dot-net-heroku” here) and set Location to the directory you want the solution directory to be created within. Check both Create directory for solution and Create new Git repository. Click OK to proceed.

Visual Studio new project dialog

On the next screen, select Web Application (Web API works too, if that’s what you want). Click OK.

Visual Studio template selection dialog

At this point you have a brand new solution. We’ll need to tweak it a bit, though.

Modify the Solution

Still in Visual Studio, go to View > Other Windows > Package Manager Console. This will give you a console with a PM> prompt. Execute the following command.

Now open up Program.cs for some edits. Near the top, add the following using directive.

Then update the Main() function as seen below.

Your Program.cs should look like mine. With that, the solution is ready for deployment. Now to take care of things on the Heroku side.

Create the Heroku App

Open up your command line terminal of choice and navigate to the solution directory. Make sure you’re logged into Heroku.

Create the Heroku app with whatever name you want.

Now to add the buildpack. I’ve had the best results with noliar’s fork, so that’s what I’m using here.

Finally, set up Git to deploy to Heroku and push.

Give the deployment some time to finish up, and there you have it. Go to http://your-app-name.herokuapp.com/ (with your app name, obviously) and you’ll see your .NET web app running on Heroku. It should look like mine.

Chrome screenshot of a .NET Core web app running on Heroku

What you’re seeing is the default index page for the template we used. At this point you’re ready to delete the default pages and start working on your own.

Bonus: Hooking up to GitHub

You’ve got your .NET web app inside a local Git repo, but maybe now you want to add it to GitHub. Start by creating a new repo. To avoid conflicts, don’t initialize with the readme, license, or .gitignore files (you can add these later).

Creating a new GitHub repo

Back in your terminal, run these commands. Replace “your-username” and “your-repo-name” as appropriate.

If you get a pop-up about security credentials, cancel out of it and enter your credentials in the terminal.

If the terminal won’t accept your credentials, it may be because, like me, you have 2-factor authentication enabled. In this case, create a personal access token with repo access and use it in place of your password.

Closing Remarks

It’s great seeing .NET break out of its Windows-only ecosystem to embrace the more open and cross-platform community of modern web development. Also, big thanks to noliar and all the other contributors for maintaining the .NET buildpack I’m using in this guide.

Quick Recap of CSSConf 2016

I recently had the opportunity to speak at CSSConf 2016. These are some of my personal notes on the experience. For a more extensive recap on the talks, check out Miriam‘s write-up.

CSSConf 2016 sticker

The Conference

The conference was held in Boston, which was great, because it finally gave me a reason to travel there. I didn’t have much time to explore, but I liked what I saw. Nice city.

Boston at night

The talks were awesome. CSS doesn’t always get a lot of love from my programmer peers, so it was nice to be in the company of people that geek out about CSS as much as I do. Even when people disagreed on certain points, it was still refreshing that people had opinions and cared enough about CSS to disagree.

The conference took place at Laugh Boston, a comedy club, which was a fantastic choice. The casual atmosphere was a welcome change of pace from your typical conference room. And now I can say I’ve performed at a comedy club.

My Talk

You can watch my talk, Silky Smooth Animation with CSS, embedded below. Slides are available here.

The wifi went out during my talk, which taught me a very valuable lesson in public speaking: make sure that you have your demos saved locally AND that they work offline. I only had the former. Fortunately I was able to hop on the wifi from the pub next door, otherwise I would have been dead in the water.

Until Next Time

It was great to finally meet a lot of people I’d only known on Twitter, as well as a bunch of new people. The front-end community is top notch. Other talks are up on the CSSConf 2016 site. Definitely worth checking out.

0 comments » Related topics:

Sassy CSS Hexagons

Need a hexagon? You can make one with CSS. Not surprising, considering the far crazier things CSS can pull off. This article will show you how to make a CSS hexagon and how Sass can help with all the math involved.

Sassy CSS Hexagons

The Approach

There are several ways to do this, but the “1 rectangle + 2 rhombuses” approach worked best for me. This is best explained visually, so here’s an animation for it.

See the Pen CSS Hexagon Visualized by Will Boyd (@lonekorean) on CodePen.

We’ll need 3 HTML elements, one for each shape. To keep the markup light, we can use a single <div> with its ::before and ::after pseudo-elements. Block elements are rectangular by default, so the rectangle part is easy. The rhombuses are achieved by applying a transform style to the rectangular pseudo-elements, flattening with scaleY() and rotating with rotate().

Time for Math

With the general shapes accounted for, it’s time to take on some math. There’s a bit of trigonometry involved to figure out the measurements. Various widths, heights, and offsets need to be precisely calculated so elements line up to form a perfect hexagon.

I’m not going to step through the math here, because honestly, that’d be boring. I will mention how Sass helped me tremendously, though. With Sass, you can use variables and set their values via formulas, like this.

In this example, I’m defining the length of a side of the hexagon in terms of the width of the hexagon. This means I don’t have to crunch the numbers manually. Even better, if I decide to change $width, $side-length will be automatically updated.

So I can create a bunch of little formulas in Sass to calculate all the numbers I need, all based off whatever width I want for the hexagon. Side note: I’m using Compass to gain access to helper functions like cos() and sqrt().

This also helps make the Sass more self-documenting, since I have descriptive variable names instead of crazy pixel values all over the place.

And there you have it, a perfect hexagon in CSS.

Keep Playing

The CSS hexagon I’ve shown you is very tweakable. It’s all just CSS, so go nuts. Tiling CSS hexagons together can also produce some neat effects.

See the Pen CSS Hexagons by Will Boyd (@lonekorean) on CodePen.

Thanks for reading!

0 comments » Related topics:

RevolutionConf 2016

I recently spoke at RevolutionConf in Virginia Beach, VA. It was the inaugural event for the conference, and my first time speaking at a conference, so I figured I’d write a few words about it.

RevolutionConf logo

My talk was about implementing motion detection with JavaScript. I’ve published it in article form, if you want to check it out.

Truth be told, I was super nervous in the weeks leading up to the conference. Public speaking seemed like a natural step after writing in this blog for so long, but that didn’t make it any less terrifying. But once I got to the venue, checked out the conference rooms and had a chance to meet some folks, the nervousness completely subsided. It just felt like a bunch of people, myself included, excited to share their craft and learn stuff.

Will Boyd speaking at RevolutionConf

A couple highlights from some of the sessions:

  • Kevin Jones had an great talk on the history of cryptography and how that history is repeating itself. Really interesting stuff.
  • David Bates‘s talk was titled “How to Make IoT Devices Speak with Fire”. I thought the title was figurative. No, he literally showed us how to hook up flame throwers to remote access IoT devices.
  • Brent Schooley gave a primer on using Swift, which I was happy to see. From my personal (and short-lived) experience as an iOS developer using Objective-C… Yeah, Swift looks nice.
  • Pawel Szymczykowski‘s talk embodied the sort of gleeful “let’s take this to the extreme” spirit that’s so fun to watch. What started as a little competition in Crossy Road led to him building a touchscreen-tapping robot guided by computer vision.
  • Julia Gao gave a talk on bringing functional programming into your front-end development. A few of my coworkers are crazy-go-nuts over functional programming, so it was nice to finally see what they’re going on about.

All things considered, I really liked RevolutionConf 2016. Beyond the talks, the people were cool, happy hours were fun, and the other speakers I chatted with were really supportive. I hope to see everyone again at RevolutionConf 2017.

1 comment » Related topics: