Check out a free preview of the full Webpack 2 Deep Dive course:
The "Deploying to Surge.sh" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

Kent adds a deploy script that will upload the application to the static-file host Surge.sh. The deploy script will first build the application and then authenticate the current user with Surge.sh. Once the application is uploaded, Kent demonstrates the file caching and Service Worker functionality. The code for this solution is on the FEM/07.1-deploy-surge branch. - http://slides.com/kentcdodds/webpack-deep-dive#/19/1

Get Unlimited Access Now

Transcript from the "Deploying to Surge.sh" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kent C Dodds: We're going to deploy to Surge.sh. The words that I have on the screen are the words are about to read to you, so I think you can read. So what we're gonna do is you have a bin that is installed in your bin directory and you're going to use it to generate a token, so you'll create a Surge account.

[00:00:27] They will not steal your identity or anything but create a Surge account and then we're going to create a script called deploy that we'll use to deploy your app to your own URL. So if you want to deploy the app, then you can follow along. Yeah, let me actually just pull up this, so I make sure I don't miss anything.

[00:00:59]
>> Kent C Dodds: Okay, so here we go. We'll go to our package.json and somewhere in here you would install this surge and it is 0.18.0.
>> Kent C Dodds: Then I'll just go ahead and add the scripts here that we're gonna need, predeploy, or actually we'll have just a deploy, yeah, deploy script.

[00:01:29] The reason that we're doing this script as a separate file is because I don't want you to have to expose your token and stuff to everybody and I didn't wanna expose mine. So you're simply gonna run scripts/deploy and that's the scripts that you're gonna create yourself. But before we deploy, we'll say predeploy.

[00:01:55]
>> Kent C Dodds: We're gonna npm run build, so then all you need to do when you deploy this to Surge is run npm run deploy and it will run the build for you. In all of your scripting magic, you probably wanna run the validate script as well, make sure you're not pushing something that's broken.

[00:02:15] But now, let's go ahead and make that deploy script. So a new file called deploy,
>> Kent C Dodds: Oops, sorry, excuse me, not called deploy, it's called scripts/deploy.
>> [SOUND]
>> Kent C Dodds: Scripts/deploy and in here you're going to have a couple of things you can actually copy. So if you're on my sites you can copy this, so it's Linux or Mac.

[00:02:53] You use this with Windows, I'm pretty sure this will work but the basic idea is the same. You create a variable with your login and your token and then you are using the Surge binary. Specify that the project lives in the dist directory, which is what we're gonna be sending up.

[00:03:18] Yeah, sorry, there was one other thing I forgot to mention about that offline plugin that's super cool. So we were talking about support for service worker. Who here has heard of AppCache? Yeah, cuz it's kind of adead technology, but it actually works in I am pretty sure almost all browsers.

[00:03:35] This is like the precursor to service workers, so offline apps, it totally works. It's just a pain in the rear to use and you can actually shoot yourself in the foot and make it so users can never, ever update your app, so beware. But somebody has done it for you and I'm pretty sure it's well tested.

[00:03:54] So service worker, you can turn this off but it has AppCache capability and so if you're on an older browser then you can use AppCache. Or if you're not serving on HTTPS, it'll fall back to AppCache, which is kind of fancy. Yeah, so again, we're surveying it from where our project lives in the disk directory and then we specify the domain.

[00:04:19] So you can have it be whatever you want it to be I did todonvc-KentCDodds and then .surge.sh, and those are free, those domains.
>> [SOUND]
>> Kent C Dodds: And again, sorry, I should say to get your token and your login and stuff, go node modules.bin/surge token. And that will give you a prompt to enter an email address and give you back your token.

[00:04:56] And then the email address that you gave Surge is the one you use here and then the token here. And then you should be able to just run npm run deploy and magic will ensue. I'm not gonna demo it for you. Well, the heck with it, you can steal my token, I don't care.

[00:05:15] So here I'm gonna run node_module. Here, I'll go back to that deploy script for you, modules/.bin/surge whoami. I'm not authenticated, cool, so I'll say token. Get my email kent+fen-woot@doddsfamily.
>> Kent C Dodds: That's why I don't care if you steal my token cuz I'm gonna delete that account later anyway.
>> Kent C Dodds: And there's my token, still quick.

[00:05:53] I'm gonna stick this in my token and stick this in my login and stick this as kentcdodds-woot. Oops, well, yeah, this should work, npm run deploy. Go run my build, and we have that fun equals thing that bounces all over the place. Actually, right here what it's doing is it's applying all the plugins, so this is where echo find is happening.

[00:06:28] Yeah, and permission denied. Yeah, so I'm not sure how to do this on Windows, but on Mac it's chmod -x. This makes it so I have the ability to run that script.
>> Speaker 2: I would do +x.
>> Kent C Dodds: Thank you, thank you.
>> Speaker 2: In Windows, everything is executable.
>> Kent C Dodds: Okay, so you don't need to worry about it.

[00:06:53] Execute the world, wow, that sounds actually really morbid.
>> Speaker 2: [CROSSTALK] [LAUGH]
>> Kent C Dodds: I didn't mean it the way it sounded. But cool, so now it's uploading all of our stuff and it's running, so I can copy this URL. Yeah, you all can go to that URL right now and boom, you have the todos app.

[00:07:13] Hey there and you can pop open this stuff. Pop open your Network tab and take a look at what things look like in there. You'll see a couple of these once you refresh the app, it'll say from service worker. Actually, shoot, I should have done this before. I'll open an Incognito tab and before I navigate there I'll open up my dev tools.

[00:07:41] And here I'm gonna see a couple things or I'm loading my styles and my bundles and those all are loading normally. And then the service worker is loading those into the service worker cache. This is the really awesome thing about this plugin that I found out about, and I'm like this is so cool.

[00:08:03] So if I go down here, let's go ahead and I'll clear this out, and then I click on this guy. It actually is loading from the ServiceWorker. I have never loaded this, I've never opened up this graph before but it prefetchs all of my assets for me. So all the code split stuff, all the different chunks, all of the assets, are loaded in the background while I'm interacting with the app.

[00:08:27] So, in other words, I go to the app, it gives me just the bare minimum of the stuff that I need. And then while I'm doing other cool things with it as a user, it's in the background loading all of the other assets I'll need as I use the app, so it's the best of all the worlds.

[00:08:44] Yeah, and that's one of the reasons why I say I probably wouldn't use an app without or I probably can't think of many use cases where I wouldn't use this.
>> Kent C Dodds: Yeah, so anybody else have this up and running anywhere? Sweet, awesome.
>> Kent C Dodds: Got a couple. Anybody need help getting it running?

[00:09:09] Anybody want to have?
>> Speaker 3: What did you type into the command line again when you got permission denied?
>> Kent C Dodds: It is chmod +x scripts/deploy.