Check out a free preview of the full Rapid Application Development with Code Generation course

The "Deployment" Lesson is part of the full, Rapid Application Development with Code Generation course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through implementing the functionality to copy the generated code to the clipboard using the npm package clipboard.js. A brief discussion regarding implementing the functionality to download and package a project into a zip file is also provided in this segment.


Transcript from the "Deployment" Lesson

>> Now, this is going to actually kind of feed into the next part of that question is, from conception, how do we get into deployment? And so I'm going to give you some hints, one with the CLI that using NX, you can generate nest entire, an entire API very quickly.

And so there's a lot of things that you can a lot of mileage you can get from the CLI. In addition to that I want to show you one really quick example, and kind of gonna lay some groundwork for you to kind of think about like how would we, how could I extend this So this is the CLI.

You saw here that I had to basically copy this. Well, what you can do with a little bit of luck my fair lady is not even a little bit of luck, like five minutes worth of work. You can essentially add functionality to copy this, or to create a button you can click, which will then put whatever it is you have on to your clipboard.

Or whatever element that you have attached a button to so in this case I am attaching clipboard js which is NPM clipboard. Super cool, although just with a warning was real quick, ha, no flash. All right, now with clipboard in place, I have a small file here, so check this out in the blitz, but I am basically saying a knit clipboard.

I'm sending in a selector, it's saying everything that matches this go ahead and attach this clipboard functionality to this. Super simple, again I feel like most everything we've done up to this point has been like level 100, maybe 120 level JavaScript. And so within our index thirty years, if we go down to the bottom.

I'm still doing all of my regular stuff but now what I'm doing is, I'm saying I'm instantiating clipboard I'm saying a knit clipboard and I'm passing in button. And so within the generated code, what I have is a button that is targeting an element in this case, the CLI, data clipboard target CLI.

And so when I run this, I can go ahead and, I'm going to copy this and if we come in here, I can just paste this in, and so this is very handy. So, that's the first step, is you can just create a button that you can then allow yourself to then copy this to the clipboard and paste it in, so that's one little convenient step.

Now one of the things that I did not do because this is framework dependent is, I think it's NGIX file saver, is an uncertain there is a react equivalent is that using NGIX file saver. It's not hard to have a adjacent download button that allows you to download this file as a text file to your local computer.

On top of that, you could absolutely have some functionality to wrap this up into a zip file, download it and go from there. So, I am going to leave it to your imagination, but here is one example of how do we streamline the workflow out of this. And so clipboard file saver and being able to zip something up and then save it is kind of that next iteration of that.

In the example that I showed you at the beginning, I actually don't download two zips that has all the generated files. On zip one, put the base file in, run a command and it just does everything. And so again, I don't want to spoon feed everything to you, but at the same time, I want to give you some hints on where you can take this.

And then you can create a version of this that you see fit.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now