 Hey, everybody, what's up? It's Rob Dodson. Welcome back to Polycast. So today on the show, we're going to be wrapping up our tour of Polymer and Firebase by taking this project that we've been working on and integrating it with the Polymer build library so that we can build it for production. So follow me over here to my laptop. And we're picking up where we left off last time. So we've got this project that we created. We can go ahead and maybe start up our server so we can just preview this thing. OK, so we can go to our terminal here. We can run Firebase serve. I'm making this a bit so you can see it. Firebase serve. That'll start up a local server just so we can see what we're working on. OK, so this is where we left off last time. We had this kind of to-do list thing that we were building. It kind of looks like a mess right now because we added messaging. We added a bunch of other weird stuff to it. So the design is totally wacky, but whatever. It has the features that we want for our application. And today, we're just going to cover how we bundle all the code together so we can launch it up onto Firebase Hosting. In my project, the first thing I'm going to do is I'm going to create a Polymer and JSON file. Polymer.json. And inside of this file, we're going to tell Polymer's build library about the entry points to our application, about our application shell, and about any other extra dependencies that we want to package up for our build. So I've gone ahead and actually just saved this puppy out. And I'll bump this up a little bit so you can see what we've got here. So we've got this entry point, which is our public index HTML file that just tells Polymer build, hey, this is where we're going to start our app. And then we've got our shell, which if you recall is our MyApp element. So everything that we've been working on so far has been kind of contained within MyApp. Now if you were using something like the purple pattern and you had additional fragments, you could add those to this Polymer JSON as well. So those would be views that you were like lazy loading over time. In our case, inside of MyApp, we've actually just got all of our views just displaying right here. We've got my log in, my notes, my subscription, et cetera. So we don't have any fragments or anything like that. We're just going to tell it about MyApp, and it'll bundle that up. And the last field that we have here is our extra dependencies. So these are things which we're not referencing as HTML imports. So Polymer itself is not referencing these things. But these are files that we do know that we need to include in our build. We want to make sure they get copied over. So this is things like our manifest JSON, the Firebase Messaging Service Worker, which we talked about in our last episode, and our Web Components Lite polyfills. So we're going to tell it to copy these over as well. OK, so that will instruct to the Polymer Build Library what to copy. The next thing we want to do is create a package JSON file and actually install Polymer Build itself. So make a package.json. And we'll just pop some stuff in here. So I just called it MyProject for now. You can name it after whatever you want. Give it whatever version you want. We're going to include a little npm build step here. So I'm just going to include a build step that's going to run gulp for us. And we'll get to that in just a bit. The main thing we care about, though, are these dev dependencies down here at the bottom. So a few items that we're going to pull in. We're going to pull in this library called Dell, which will allow us to sort of clean up our build directory every time we're about to do a new build. We'll pull in gulp. And notice that we're using version 4 here. And then these last two, Merge Stream and Plylog. These are just for debugging Polymer Build as you're using it. Or Merge Stream is for merging your streams, Plylogs for debugging. And Polymer Build, we're going to pull in the latest alpha version, which is 0.6.0 alpha. Probably by the time you're watching this episode, 0.6 will be out already. But I wanted to go ahead and use it now because it's a little bit easier to use some previous versions of Polymer Build. So we've got that ready. I'm going to run npm install. And I've actually already got all these things installed in my node module, so we don't have to wait for it to download or anything. The next thing we want to do is create a gulp file. So make gulpfile.js. And what I'm going to be doing here is I'm going to be using gulp and the Polymer Build library directly instead of using Polymer CLI itself. Now, if we used Polymer CLI on this project and we just ran Polymer Build, it actually would do a pretty good job of building everything. But it's going to create some additional things, like a service worker. And it's going to put it in a weird place because right now, Polymer Build's CLI service worker is not programmable for the output directory. That's something that they're going to probably change in a future version of the CLI. So we don't have these weird vestigial files laying around and stuff like that. We're just going to use Polymer Build directly. We're going to tell it exactly what we want it to build. So we're going to do that inside of this gulp file. And I've actually gone ahead and pre-written this gulp file because there's a fair bit of code in here. We can walk through these piece by piece, just so you understand what is going on here. At the top of our gulp file, we're just pulling in a few items that we'll need for doing work like setting up our paths, pulling gulp, merging our streams, deleting files, and things like that. This is all typical boilerplate. What gets interesting is when we get down here to Polymer JSON. So we're actually going to require Polymer JSON. We're going to pull in our Polymer JSON file so that we have it in gulp. We're going to pull in the Polymer Build library, and we're going to pass it our Polymer JSON file when we instantiate it. So that way it has some configuration. And then we're going to tell it that we want our build directory where it outputs everything to be build slash bundled. So this is going to take everything that's in our public directory right now and put it in build slash bundled slash public. Then I have to find this little helper here, because the gulp file that we're going to create is going to be maybe a little atypical from most gulp files that you've seen. It's going to be basically one build function that's going to have a promise chain. And there's going to be a few places where we're going to wait on some streams from Polymer Build. So we've got this wait for function right here. All this does is it returns a promise, and it listens for a stream's end or error event, and either resolves or rejects the promise. This is going to be very helpful for our build function. And then inside of the build function itself, we're going to kick off Polymer Build. Now, the Polymer Build library, if you recall from our episode on writing your own generator using the Polymer Build library and the custom generator init function, Polymer Build library takes all of your HTML imports. It looks at the CSS in them. It looks at the JS in them. It looks at the HTML, and it extracts each of those into its own file stream. And you can run transformations on the stream. So if you want to do CSS minification, you want to do JavaScript like uglifying or something like that, you can after it has split apart those streams. And then once you've done those transforms, it rejoins everything for you. So what we're going to do is we're going to start off by calling this del function. We're going to delete the build directory. If there's already something inside of it, we'll just clean it out so we can start fresh. And then we're just going to work through a little promise chain. So we're going to create a source stream using the Polymer Build library. What it's going to do is it's going to look at our entry point for application. It's going to look at that MyAppHTML file. And it's going to figure out all the HTML imports that it references. And it'll treat all of those as sources. So we're going to create a stream for that. We're going to tell it to split the HTML. That's how we create the CSS, the JS, and the HTML streams. And here is where you could run any sort of transforms you wanted to. So for instance, if you were using something like uglify, you could then pipe one of those streams to uglify. You would use the Gulpith library to check the file extension. So if it's a JavaScript file, pipe it to uglify. If it's a CSS file, pipe it to CSS slam. HTML, pipes to HTML minifier, et cetera. So I'm going to comment these out for now because I don't have these libraries installed just yet. But I'm going to leave these here. And when I put the code up on GitHub, these will be here for you. So if you want to add your own Gulp transforms, you can. So that'll be all of our source files. And then we've also got a separate step where we work through all of our dependencies. So this is stuff that's living in Bower components or whatever. If you want to uglify those or CSS slam those, you can as well. So that's going to create two streams, sources, and dependencies. And then we're just going to merge the two streams together. We'll have a little console log here as soon as we start getting some data out of the stream that just tells the user, hey, we're analyzing these streams. If we want to do bundling, we can pass it to our Polymer project bundler. So we're going to pipe all those streams into Polymer project bundler. That's what's going to go through and basically run vulcanize on your behalf and start to put everything into the MyApp file. You could do additional things here, too. Like if you wanted to add prefetch links and stuff like that, you could explore doing that with your own transforms. And lastly, we're just going to take everything and we're going to pipe it to the build directory, which if you remember is build slash bundled. We set that up at the top of the file. And then we're just going to use this wait for helper function to wait on the build stream. So after it's done processing all of our files, this promise will resolve and it can move down to the very last step in the promise chain. We're just going to console log out to the user, hey, everything is done. We'll resolve that one last promise. And then that's it for our gulp test. That's our entire build process for our Polymer site. The last thing to do is just to set this as our default build step for gulp. And we should be off to the races. So let's open our sidebar here and let's give it a shot. So open our terminal up and we will run. I'll make this a little bit bigger. So we're going to run gulp or because I added in my package JSON file, I added a build script. We could also run npm run build. Either one of those should work. So we run that. And we should start seeing those console logs coming out. So it's deleting the build directory. It's analyzing our build dependencies. Then it tells us that the build is complete. If we go back to our text editor and we look at our build directory, you can see now we've got inside of build bundled. We've got all of our project files. It copied over things like our Firebase messaging service worker because we added that to extra dependencies. And if you look at myapp.html, you can see that it sort of munged all the code into this file. So it re-envolcanized for us, which is great. The last thing we can do is we can preview this using the Firebase server. The one change we need to make there is we'll go to Firebase JSON. For hosting, we'll tell it that we want to look at build slash bundled slash public. Save that. Go over to our terminal. So we'll run Firebase serve. And it'll tell us that it's serving build bundled public. Click on localhost 5000. And here you go. Here is our bundled project. And we can verify that it's the bundled version by opening our network panel, clearing everything out, hard refreshing the page. And you'll see that instead of requesting tons and tons of HTML imports for all of our dependencies, we only really see a couple HTML imports. I think we actually only see myapp.html. I'm going to look at the source for that and verify that it is the vulcanized version. So at that point, the only thing you have left to do is to run Firebase deploy. And your site is ready to share with the rest of the world. So that about covers it for today. If you have any questions on using Polymer and Firebase, as always, you can leave them for me down in the comments or hit me up on a social network of your choosing. As always, thank you so much for watching. And I'll see you next time. Hey, folks. What's up? It is Rob. Thank you so much for watching this episode. If you'd like to see some more, we got some over there in the playlist. And as always, you can click the little Subscribe button to keep getting content every time we push it up to the channel. Again, thank you so much for watching.