This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Exercise 0: Setting up Shop" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kevin Whinnery: So the first thing that I wanna do before we get started, is to ensure everybody is at a good place with their local development environment. So that GitHub repository, that I sent out before, contains what should be, at this point, a fully functional no JS web application that you can run locally.
[00:00:21] So if you head out, if you haven't gone there already, it's actually up on my GitHub repository. GitHub.com/kwhinnery/todomvc-plusplus, and thanks to some great QA from here in the room earlier. I believe that ReadMe should take you all the way through actually getting this thing set up locally on your laptop.
[00:00:44] And I think that is the first step that we need to accomplish before we get on to some of the other things. So we'll take as much time as we need, hopefully, not too much time, just to make sure that we get everybody with a functioning local development environment so they can start playing along at home.
[00:01:00] So let's go ahead and do that, and I'll be coming around to help folks as they might need help. The one potential tripping point for a local development environment, may or may not be getting like post grads up and running. Postgres can be kind of a bear to configure for local local development.
[00:01:21] So if you want to take sort of a short cut, there is a service out there you can sign up for called ElephantSQL. And you can actually provision a shared Postgres database for free. And we can drop that database configuration directly into your application. So I would invite you to go through the README, start taking those steps if you haven't already.
[00:01:46] And while you're doing that, I'll very briefly kind of go through the structure of the application project as it exists today. So you have a sense of where to look for what. So I'll browse it out here on GitHub. And the bits that I'll draw your attention to you right away are this bit, the grant file, which I'll dive into you a little bit later.
[00:02:10] And that's sort of the nexus for most of the administrative commands that will run for this application. Grunt is a general purpose task runner. Again, that will dive into in more depth later. We have a package.json, which contains all of our projects dependencies, that you'll be installing. And then we have a bin directory, which contains the the JavaScript file, which actually run a watch is the HTTP server, which powers our application.
[00:02:37] And then right now we just have one custom grunt task located in this directory as well. But anything having to do with any custom code, we're gonna write for the command lives in there. The configure directory, this is how we use it. It's sort of loosely based on Django configuration, but we have a this index.js, which has sort of the global defaults for the applications configuration.
[00:03:08] And then we have a configuration files with overrides for the development production and test environments so you can dig through that if you like. But we also have this file user.save.js, which doesn't have anything in it right now. But if you create a user.js for local development, you could override any of the configuration settings there.
[00:03:29] Such as a custom database URL perhaps, if you go the route of spinning up an ElephantSQL database rather than having a local one. So configuration lives there, we have this db directory, and the primary bit you'll be interested in is this is where we have configured our orm to place the migration files for this application.
[00:03:55] We are using a relational database for this application, so as we modify the database we'll have to create migrations to move the database from one state to another. If you're used frameworks like Rails or maybe hibernate before you kind of familiar with this concept. The source directory is where most of the fun stuff lives.
[00:04:18] The browser directory has all of the front end JavaScript code and as SCSS files. The static directory contains things that will be copied over verbatim into the web root of your application. The server directory contains our express web app, our mocha task for our back end code. It also contains the model directory which configures our database connection and defines the model objects for our application.
[00:04:55] We have controllers which have the routes for our application, and this to do is controller, which actually powers all of the routes in the application. If you don't know what these things are don't worry we'll kind of dive into more of them as we go. Now we also have the views directory which actually has the HTML which will serve the front end for this application.
[00:05:19]
>> Kevin Whinnery: And there is a tiny bit of shared code, in my experience, the opportunity for code reads on client and server is not maybe as great as you had hoped. The bigger win is the ability to write the same kind of code. And both line in the server, but there is a tiny bit of affordance for shared code across platforms.
[00:05:38] And will if you have any questions about other stuff as we go along. I'd be happy to be happy to go specifically into any of the decisions or the other other bits there. But many of them will go over as we go through the course. So at this point, what I would like to do is ensure that everybody gets the application going locally to the point where they can run a grunt in the top level application directory.
[00:06:08] Which will fire up a couple of neat tools which will monitor your application project for changes. And then execute compilation steps or relaunching the application based on changes. So what you should be able to do with a running Postgres database and a valid database connection is I have a persistent set of todos that will stick with you across page refreshes.
[00:06:37] Because in this instance, they're actually being stored in a Postgres database. So this is the step that I would like to get everybody to. So we'll spend a little bit of time doing that before we dive into some of the code that drives the web server. All right, so I remiked myself because I was talking about the option of using ElephantSQL rather than a local Postgre database.
[00:07:00] It looks like my configuration might not be totally sound as yet. Because I haven't run the migrations cuz I change my database URL, but I didn't run the migrations. So I am going to run sequelize db:migrate.
>> Kevin Whinnery: And that should go across the network and update my ElephantSQL database.
[00:07:29]
>> Speaker 2: Show us where you change the config.
>> Kevin Whinnery: And again where I change that config was I created a file called user.js in the config directory. And I didn't override for this database URL property, and you can actually copy the configuration like say from the test environment and just bring that over.
[00:07:49] And then you can paste in that Postgres URL, you get from ElephantSQL. And now when I refresh, I get an empty list of to do's which is okay. And if I go back to the UI, I should start being able to pop in some to do list items.
[00:08:09] So the steps there would be to update the configuration to your ElephantSQL database URL to go out to the terminal and execute, sequelize db:migrate. And then you can rerun your development server with Grunt and you should be off to the races from there.
>> Speaker 3: And what is the get path to ElephantSQL?
[00:08:37]
>> Kevin Whinnery: It is,
>> Kevin Whinnery: If you go to ElephantSQL.com, you can sign up for an account, and then you can create your own.
>> Speaker 3: What are the limitations on ElephantSQL, as far as use?
>> Kevin Whinnery: The free database is only 20 megabytes. So that would be the big one right there.
[00:08:57] But you can create multiple free databases if you would like.
>> Speaker 2: Charting across free. [LAUGH]
>> Kevin Whinnery: Yes, maybe it has some other fun features as well. But use this a couple times in workshops just for something quick and dirty.
>> Kevin Whinnery: All right, so,
>> Kevin Whinnery: We have a couple folks online reporting an issue that was, if you loaded up the README earlier.
[00:09:26] We actually discovered some bugs in it, I apologize, here in the room earlier this morning. If you're loading up the page and you don't see, and the style sheets aren't being loaded run grunt collect_static, and collects static has an underscore between the collect and static. The README on GitHub has been updated to reflect this.
[00:09:47] But that will copy over the static CSS files that you need to be in that public directory. So the README is with updated to reflect that. But I'll show one more time is the fastest path to success with Postgres, which I think is where most people are tripping up.
[00:10:06] If you're on the repo and following the README, we'll start kind of right from the beginning. You're still gonna wanna do this after you download the code. If you haven't already, you wanna do npm install in the directory in which you downloaded the code. You wanna do npm install -g grunt-cli and sequalize cli, and that'll put two new commands on your system path.
[00:10:27] One is called grunt, and that's the task order that we're gonna be using. And another is called sequelize, and that will control the database migrations and the other stuff the only to do later. And then for setting up the database, if you don't wanna go the route or were not successful going the route of getting a local Postgres database going with these instructions.
[00:10:50] Simply forgo these instructions and create a database using ElephantSQL which you can sign up for a free account at elephantsql.com. Then once you have signed up for one, the first thing you're gonna see is a URL for your database info. And you can use this connection string in lieu of a local Postgres database.
[00:11:17] So to connect to this database rather than one that's running locally inside your application folder here. And this is the code that you downloaded from GitHub or you cloned when you got the repository. You will create a file called user.js, and you can initialize the contents of that file with what's in the test.js file or similar.
[00:11:45] And then you will copy in your ElephantSQL database string into this file. And then the application will connect to that ElephantSQL database rather than one that's running locally. After you do that, then you can continue along with the rest of the instructions in the README. See, you will then do sequelize db:migrate.
[00:12:11] And then you will do grunt collect_static, and then at that point, you should be able to run the application locally just by running the grunt command. So we'll make sure that we get everybody to that step. But again, I think the fastest path to success is signing up, if you're struggling with Postgres locally, sign up for an account here and ElephantSQL.
[00:12:34] And just go ahead and use that, we'll be totally fine for our little local development purposes. Right, so we will come around make sure if anybody still needs help. And when we get into the next exercise, we make sure everybody starts by getting the local development environment radio.