Introduction
We introduce the Markdown Editor project, what tools we'll use, and what techniques we'll learn along the way.
- shadow-cljs (CLJS project tool)
- npm (JS Code repository)
- Reagent (React wrapper)
- Showdown (JS Markdown parser)
- GitHub (version control)
- Netlify (static hosting)
Transcript
Hello friends. Today we're going to build a simple single page application enclosure script. It's going to be an easy build today, and we're actually going to deploy it when we're done into the out in the open internet. So what application are we going to build? Well, it's a simple markdown editor. If you know Mark down, you know that.
[00:00:29] Uh, it's a simple text format that outputs to HTML. And so we can have a little bit, I'll just demonstrate a little bit
[00:00:47] you can see how nice and, um, live the preview is. We've got both preview of both the markdown and the HTML.
[00:01:01] Like that. And then the other thing is that you can actually edit here. Uh, I can put in,
[00:01:12] so that's what we're going to be building. It's going to be, it's building closure script using shadow CLJ S shadow CLJ S is a project management and build tool for closure script. Um, it uses reagent for doing the, for handling the react and the Dom and building the UI out. Um, we're going to be, the reason I chose shadow CLJ S was because it has really great NPM support.
[00:01:41] So we're going to be using NPM packages, uh, in our closure script app. Uh, we're also going to be deploying it to net lo-fi. And net. Low-fi has a thing. This is a host for mostly static assets, but they have other stuff too. We're just going to be doing the static stuff. We're going to serve HTML and JavaScript, and the JavaScript is going to be compiled from closure script and it has a feature on the free tier where if you push some a project to get hub.
[00:02:19] You can set it up to automatically deploy to net lo-fi. And so we're going to set that up and net low-fi will do the shadow CLJ as build. Uh, and then your site will be live. So that's what we're doing today. Um, but we're going to learn some other cool stuff on the way that's sort of like the, the, the tools and things we're going to be using.
[00:02:44] But this is going to be a great example of live coding. We're going to have shadow CLJ S watch our code file for changes. So it's not exactly, um, it's certainly possible to do it with rebel driven development, but we're not gonna look at that today. That is a much easier, simpler, um, uh, easier to get started with workflow, which is.
[00:03:11] Uh, just have something in the terminal that is watching you save your file, and as you save it, it's going to get compiled to JavaScript and sent to the browser. So we have a live reloading. That's totally fine. Um, we might get into a little bit of rapid driven development, but it won't be too intense.
[00:03:31] And. Uh, we'll also be looking at how to use NPM libraries, which, believe it or not, I'm, I know very little about NPM, but working through some tutorials and reading some guides, I was able to get this working and shadow CLJ has makes it really easy. So even though I didn't know about how to set up an NPM project or use NPM dependencies.
[00:03:57] I've got them working in this project. Um, one reason you might want NPM libraries is because it's a big ecosystem. Uh, there's a lot of good code out there. It's a lot of bad code too in the JavaScript ecosystem, but there's a lot of good stuff and you want to use it. How do you do that? Well, Chateau CLJ S makes it easy to just do it from NPM.
[00:04:21] Okay. So I'm going to see you in the next lesson where we'll get everything installed and set up.