![\"FINISHED](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P00-Technical-Planning/assets/ch1-done.png\" "\\"\\"")
\n This tutorial is part of a four part series with the Giphy Search Tutorial, the Concentration Game, the Rotten Potatoes Tutorial. Whereas those tutorials gave you 100% of the code or starter code you needed to build them, this project will be more demanding of you to write your own code, or find the proper code snippets from your other projects and framework documentation.
In this tutorial you will develop a clone of Reddit with posts, subreddits, and authentication. The tools you will use are:
This tutorial should take much longer than the previous tutorials to complete and it will require that you read instructions very carefully and follow them step by step. You might encounter errors that you will need to troubleshoot and google to solve. If you would like to provide feedback on this tutorial, please leave GitHub issues on the GitHub repo.
"},{"id":"T0E6OlNlY3Rpb24tODAxNQ==","title":"Why is this important?","htmlContent":"When you're building large scale applications, it's good to have some practice with the tools that enable you to spin things up quickly. Trying to do everything using vanilla code, while commendable, can be incredibly time consuming. Knowing which frameworks and tools to use to get everything up and running will make your life significantly easier when you're doing this in the industry. We'll also cover how to do an auth flow using JWTs, an incredibly popular tool to use for auth that you'll be able to transfer over to any time you want to put an auth flow in your app!
"},{"id":"T0E6OlNlY3Rpb24tODAxNg==","title":"Learning Outcomes","htmlContent":"By the end of this tutorial, you should be able to...
This tutorial will walk you through a pattern of \"user-centered\" or outside-in development with route tests, meaning you will first develop a simple template for a route, then it's actual backend logic. By following this pattern, software is built step-wise and organically without leaps or guesses. This avoids large architectural bugs which are the biggest drain on the speed of a development team.
As you build, keep in mind the rules of a good user interface. Review those here: goodui.org.
"},{"id":"T0E6OlNlY3Rpb24tODAxOA==","title":"Using Git/GitHub","htmlContent":"As you go through this tutorial, you will also be making commits after completing milestones. This is a requirement, you must make a commit whenever the tutorial prompts you. This not only further enforces best practices for software engineering, but also will help you more easily figure out where a bug originated from if you break your progress up into discrete, trackable chunks.
When prompted to commit, you'll see a sample commit message. Feel free to use your own message, so long as it clearly and concisely covers the work done.
Lastly, the commit prompts in this tutorial should be the minimum amount of times you commit. If you want to do more commits, breaking your chunks into even smaller chunks, that is totally fine!
"},{"id":"T0E6OlNlY3Rpb24tODAxOQ==","title":"Getting Started: User Narratives & Wireframes","htmlContent":"If you are not familiar with Reddit, navigate there now and explore this internet wonderland. Check out its history if you like. It was founded by Alexis Ohanian --- now an investor in Make School. Sweet!
While you're there, draw a wireframe of each page on some scratch paper. The basic layout contains two navbars (one for subreddits, and one for sorts/filters) and a two column layout in a proportion of about 10:2, with no side gutters or padding.
"},{"id":"T0E6OlNlY3Rpb24tODAyMA==","title":"Technical Planning","htmlContent":"Now it's time to get started by making a step-by-step plan. Here are some of the routes and features we could build:
In what order should we fulfill these tasks? What do you think? Write it down step by step somewhere. When you are done, hover over the solution to see what order these tasks are implemented from within this tutorial.
We should work from the fundamental to the desirable --- the structure of our program comes first, then any nice-to-haves. Generally, it's best to delay the implementation of authentication as that can cause some initial complexity; we'll do authentication in the middle. Voting could come sooner or later; we put it at the very end. Until that point, we'll have a somewhat-themed Twitter or Facebook wall... until there is voting and sorting on votes, that is!
\n\nOk --- we've got user narratives, wireframes, and a plan for the first few features to implement. Time to get started coding! Remember not to \"work ahead\", instead always do the absolute minimum work to get what you are working on to function and then move to the next.
Follow this video for how to setup an Express.js project with Handlebars:
npm init) - remember to make your main file called server.js. Use the express documentation or a previous project to set up the boilerplate code for the server.express-handlebars is installed. Navigate to express-handlebars and read the Usage documentation for how to do this.nodemon and see that your home.handlebars and layout.handlebars templates are working and displaying correctly.<head> using the CDN. Use the following starter template as a guide for your own! Create a views folder and in there we can create a main.handlebars file that will serve as our base.
<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6\" crossorigin=\"anonymous\">\n\n <title>Reddit.js</title>\n </head>\n <body>\n <h1>Reddit.js</h1>\n\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf\" crossorigin=\"anonymous\"></script>\n </body>\n</html>\n\n
When you're done, you should have something like this to start off with:
Not very great looking, but it's a fantastic start!
Now that you have a basic initialized project, let's commit to GitHub.
$ git init\n$ git add .\n$ git commit -m 'node reddit clone project init'\nNow go to GitHub and create a public repository called Node-Reddit-Clone, and now associate it as a remote for your local git project and then push to it.
$ git remote add origin GITHUB-REPO-URL\n$ git push origin master -u\n
Onwards!
"}]},"next":{"id":"T0E6OlBhZ2UtMTU4NQ==","slug":"create-a-post","title":"Create a Post"},"previous":{"id":"T0E6OlBhZ2UtMTU4NQ==","slug":"create-a-post","title":"Create a Post"}},{"id":"T0E6OlBhZ2UtMTU4NQ==","title":"Create a Post","slug":"create-a-post","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjgyMQ==","title":"Create a Post","htmlContent":"Follow the technical planning list we made, and make sub tasks for each major feature.
/posts/new) and template (posts-new.handlebars)posts-new templatecreate posts route and check that form data is sending to new routePost model with mongooseTo create a new instance of a resource, we first have to make a button to make a new post.
\nSince making a post is a very important Call To Action (CTA), we'll put it in the navbar.
\n<li><a href=\"/posts/new\" class=\"btn btn-primary navbar-btn\">New Post</a></li>\n
Next, we have to create the form. Let's follow RESTful routing and make the url match this pattern: /<<RESOURCE NAME PLURAL>>/new. In the case of a resource Post, the path will be /posts/new.
\nCreate this /posts/new route and have it render a newly created template named posts-new.handlebars.
Now, use the bootstrap form classes to add a form for an object with a title, url, and summary attributes. Your form should have an action that points to a create route => /posts.
Remember to put this form in the center 4 columns of a grid.
\n<div class=\"row\">\n <div class=\"col-sm-4 col-sm-offset-4\">\n <form action=\"/posts/new\" method=\"post\">\n <legend>New Post</legend>\n <div class=\"form-group\">\n <label for=\"post-title\">Title</label>\n <input\n type=\"text\"\n name=\"title\"\n class=\"form-control\"\n id=\"post-title\"\n placeholder=\"Title\"\n />\n </div>\n <div class=\"form-group\">\n <label for=\"post-url\">Url</label>\n <input\n type=\"url\"\n name=\"url\"\n class=\"form-control\"\n id=\"post-url\"\n placeholder=\"https://www.google.com\"\n />\n </div>\n <div class=\"form-group\">\n <label for=\"post-summary\">Summary</label>\n <textarea\n name=\"summary\"\n class=\"form-control\"\n id=\"post-summary\"\n placeholder=\"Summary\"\n ></textarea>\n </div>\n <div class=\"text-right\">\n <button type=\"submit\" class=\"btn btn-primary\">Create Post</button>\n </div>\n </form>\n </div>\n</div>\n
Your nav bar should look like the following:
And the form:\n\n ![\"NEW](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P01-Create-A-Post/assets/new-post-form.png\" "\\"\\"")
\n
So what happens when you submit this form?
Nothing! We're missing a /posts/new route, so let's make it.
\nFirst, make a new folder called controllers. Within, create the file posts.js.
module.exports = (app) => {\n // CREATE\n app.post('/posts/new', (req, res) => {\n console.log(req.body);\n });\n};\n\n
Next, require this file in your server.js file, and pass in the app variable as an argument.
require('./controllers/posts')(app);\n\n
What happens when you submit the form?
Is req.body defined? No?
That's because you need to parse the json coming in through the req.body.
It's time to get req.body to reflect and contain the submitted form inputs from your front-end.
Research what express json does in the documentation.
While you're at it, also research the role of express validator. What role does it play alongside the express.json() middleware?
Essentially, express.json() is a necessary middleware to communicate with your POST requests.
express-validator is a wrapper around validator.js that validates and sanitizes string inputs.
\nIn production, your users will try to type in all kinds of nonsense into your forms --- even things your site wasn't intended to deal with! express-validator plugs into the Express.js ecosystem and helps keep you and your code safe.
\nInstall express-validator:
npm install express-validator\n\n
Note: as of npm 5.0.0 installed modules are added as a dependency by default. The --save option is no longer needed.\nStack Overflow Answer
\nNext, add the following to your server.js file:
app.use(express.json());\napp.use(express.urlencoded({ extended: false }));\n\n
You're going to need to connect to a NoSQL database called MongoDB. Look through the documentation as a reference if you get stuck. It's just a good habit to get into.
\nLet's start off by creating a new /data folder in the top-level structure of your project, then create a new JavaScript file.
Open your terminal and type:
\n![\"NEW](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P01-Create-A-Post/assets/new-post-button.png\" "\\"\\"")
\n mkdir data\ncd data\ntouch reddit-db.js\n\nNow, we need to make sure that we have mongodb installed by doing a which command.
\nYou should see a destination path to the Mongo executable:
\n$ which mongod\n/usr/local/bin/mongod\n\n
We're also going to make sure that our Mongo database is running:
\nbrew services restart mongodb-community\n\n
Great! Next, we're going to use the reddit-db.js file we made earlier to connect to the database.
\nOpen reddit-db.js, and paste the following code inside:
/* Mongoose Connection */\nconst mongoose = require('mongoose');\nassert = require('assert');\n\nconst url = 'mongodb://localhost/reddit-db';\nmongoose.connect(\n url,\n {\n useNewUrlParser: true\n },\n function(err, db) {\n assert.equal(null, err);\n console.log('Connected successfully to database');\n\n // db.close(); turn on for testing\n }\n);\nmongoose.connection.on('error', console.error.bind(console, 'MongoDB connection Error:'));\nmongoose.set('debug', true);\n\nmodule.exports = mongoose.connection;\n\n
Now all that's left is to tie this into our main server.js file.
\nOpen up server.js, and paste this in:
// Set db\nrequire('./data/reddit-db');\n\n
In order to interact with the MongoDB database we're going to use the npm module mongoose. Mongoose is the ODM - the Object Document Mapper. That means that it maps JavaScript objects in our application to documents in the database. Mongoose works through schemas, written in code, called Models.
IMPORTANT NOTE: Make sure that you put all middleware requires BEFORE all routes (including routes imported from other files), or your routes may not work!
Read the note above again! No really, re-read it so that you remember to do this throughout the tutorial. Your future self will thank you from all the time/frustration you save
\n\nCreate the folder models and inside put the post.js file. Here's a sample model for our Post resource.\nWe can use destructuring to get Schema directly from the require statement.\nIf you would like a video explaining destructuring check out JS Destructuring in 100 Seconds
const { Schema, model } = require('mongoose');\n\nconst postSchema = new Schema({\n title: { type: String, required: true },\n url: { type: String, required: true },\n summary: { type: String, required: true }\n});\n\nmodule.exports = model('Post', postSchema);\n\n
Now that we have a model, require it at the top of controllers/posts.js:
const Post = require('../models/post');\n\n
Put it to use in our \"create posts\" endpoint:
\nconst Post = require('../models/post');\n\nmodule.exports = (app) => {\n\n // CREATE\n app.post('/posts/new', (req, res) => {\n // INSTANTIATE INSTANCE OF POST MODEL\n const post = new Post(req.body);\n\n // SAVE INSTANCE OF POST MODEL TO DB AND REDIRECT TO THE ROOT\n post.save(() => res.redirect('/'));\n });\n\n};\n\n
Notice how res.direct is on the same line and we have left out the curly brackets.\nThis is not a mistake. If an arrow function only has one line in the curly brackets and we want to return that line, we can put it on the same line and remove the curly brackets.\nRead more.
Additionally, we want to ensure we always return the res and exit the code execution, unless we have a specific reason why we want to continue the code execution.
So we can save to the database, but how can we be sure? There are a couple of ways! We could go into the mongo shell and inspect our database, observing that the posts collection is now populated with documents. Alternatively, we can use a program, Robo 3T, to graphically inspect our database and observe what collections and documents we've created.
Use either the mongo shell or Robo 3T to confirm you are successfully creating posts before moving on.
$ git add .\n$ git commit -m 'Users can submit and save posts'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tNjgyOQ==","title":"STRETCH CHALLENGE: Adding Created At and Updated At Attributes","htmlContent":"\nCreate a new model, and figure out how you can display these new attributes in your app:
\nconst { Schema, model } = require('mongoose');\n\nconst postSchema = new Schema({\n title: { type: String, required: true },\n url: { type: String, required: true },\n summary: { type: String, required: true },\n}, { timestamps: true });\n\nmodule.exports = model('Post', postSchema);\n\n
As of Mongoose 4.0 you can now set timestamps options on the Schema and have Mongoose handle the created at and updated at attributes for you. The type assigned is Date.
Alright next step! Now that we can create posts, let's display them.
/) go to the /posts/index route render a posts-index templateposts object/posts/show route (/posts/:id)post objectNext, you'll need to handle promises from the Mongoose perspective.
I'm going to encourage the use of promises to handle asynchronous transactions. As of Mongoose 5.0 native promises are used by default. Read more
Finally, for testing, we can add an error handler for connection errors.
\nOpen /data/reddit-db.js and make the following changes to support connection error handling and promises:
mongoose.connect(\n url,\n {\n useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false,\n },\n (err) => {\n assert.equal(null, err);\n console.log(\"Connected successfully to database\");\n\n // db.close(); turn on for testing\n }\n);\nmongoose.connection.on('error', console.error.bind(console, 'MongoDB connection Error:'));\n\n
Note that the following line we included previously allows us to display debug info from Mongoose in the console:
mongoose.set('debug', true);\n"},{"id":"T0E6OlNlY3Rpb24tODAyNQ==","title":"/Posts/Index Route","htmlContent":"
\nNext, let's create a posts-index template in our views folder. Don't worry about it looking fancy right now, we'll spruce it up in a bit. Just have it display hello world for now, or something equally simple.
Once that's created, we want to have the root route (/) render the posts-index template. We also need to then pull the posts out of the database, and send them along with the response. Let's edit our INDEX call in our posts.js controller. Remember to put it AFTER you require all the middleware:
app.get('/', (req, res) => {\n Post.find({}).lean()\n .then((posts) => res.render('posts-index', { posts }))\n .catch((err) => {\n console.log(err.message);\n })\n})\n\n
Want more of a challenge?
As a stretch challenge try rewritting the code block above to be async/await.\nHere is are some video resources:
\n\n\n\n\n\nCallbacks vs Promises vs RxJs Observables vs async/await
\n\nAnd also some text resources:
\n\n\n\n\n\n\nAsync/Await Solution
We will not give you the solution to every async/await stretch challenge but hopefully this first one gives you a positive direction to head in.
\napp.get('/', async (req, res) => {\n try {\n const posts = await Post.find({}).lean();\n return res.render('posts-index', { posts });\n } catch (err) {\n console.log(err.message);\n }\n});\n\n
Now, how clean does that async/await code look?
\nTry running this and see if your posts-index is being displayed. If so, replace your hello world with the variable {{posts}}. What do you see?
Now, back to those posts! Let's fix them up and display the them properly.
\nIf you haven't already, let's go back to our layout template main.handlebars and put the whole {{{body}}} object into a div with a container class.
<div class=\"container\">\n {{{body}}}\n</div>\n\n
Great, now let's go back to posts-index.handlebars and make it look good!
\nTo start, we'll put the list of posts into the middle 8 columns of the grid.
\n<div class=\"row\">\n <div class=\"col-sm-8 col-sm-offset-2\">\n {{!-- more code will go here --}}\n </div>\n</div>\n\n
Now that we have {{posts}}, we can use handlebars' built in each operator to loop over the posts, and display each one.
\nIn each post, use bootstrap's list-group and list-group-item classes. Display the post title in a div with the class lead, and add an anchor tag that links to the post's url. Finally, add target=\"_blank\" to the anchor tag, so that the url opens in a new tab. Here's the full posts-index.handlebars:
<div class=\"row\">\n <div class=\"col-sm-8 col-sm-offset-2\">\n <ul>\n {{#each posts}}\n <li class=\"list-group-item\">\n <div class=\"lead\">{{this.title}}</div>\n <a href=\"{{this.url}}\" target=\"_blank\">{{this.url}}</a>\n </li>\n {{/each}}\n </ul>\n </div>\n</div>\n\n
![\"Mmmm....gross!\"](\"https://media1.tenor.com/images/d7420437d451a30e34ffd952c3e5fcdf/tenor.gif?itemid=10121029\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can view a list of posts'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODAyOA==","title":"Viewing One Post","htmlContent":"In order to view a single post when a user clicks on it, we'll need to establish a route for individual posts, and render them in their own template.
Let's begin with the user action - clicking on a post in the post-index template.
\nReplace the current div for displaying a post's title with the following:
<div class=\"lead\"><a href=\"/posts/{{this._id}}\">{{this.title}}</a></div>\n\n
The title is a link to the show page. If we click it, what happens? Error! No route! It's time to fix that.
"},{"id":"T0E6OlNlY3Rpb24tODAyOQ==","title":"/Posts/Show Route","htmlContent":"We need the path /posts/:id to resolve to displaying a posts-show template.
\nopen controllers/posts.js, and add a new GET endpoint. Make sure all middleware requirements happen ABOVE it:
// LOOK UP THE POST\napp.get('/posts/:id', (req, res) => {\n Post.findById(req.params.id).lean()\n .then((post) => res.render('posts-show', { post }))\n .catch((err) => {\n console.log(err.message);\n });\n});\n\n
Async/Await stretch challenge!
Refactor the code block above to be async/await.\nIf you get stuck, there are video and text resources linked at the first async/await stretch challenge.
\nWhat happens if we refresh? No template!
"},{"id":"T0E6OlNlY3Rpb24tODAzMA==","title":"Making the Template","htmlContent":"Time to template. As a bare minimum we'll use some bootstrap classes to make things look reasonable as we continue to develop the application.
\nIn your views folder, make posts-show.handlebars with the following template:
<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <a href=\"{{post.url}}\" class=\"lead\">{{post.title}}</a>\n <p>{{post.summary}}</p>\n </div>\n</div>\n\n
Now can you see your post?
What about clicking into your post?
"},{"id":"T0E6OlNlY3Rpb24tODAzMg==","title":"Now Commit","htmlContent":"![\"POST](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P02-Displaying-Posts/assets/post-home.png\" "\\"\\"")
\n ![\"POST](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P02-Displaying-Posts/assets/post-summary.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can see individual posts'\n$ git push\n"}]},"next":{"id":"T0E6OlBhZ2UtMTU4Nw==","slug":"testing-posts","title":"Testing Posts"},"previous":{"id":"T0E6OlBhZ2UtMTU4Nw==","slug":"testing-posts","title":"Testing Posts"}},{"id":"T0E6OlBhZ2UtMTU4Nw==","title":"Testing Posts","slug":"testing-posts","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjgzOQ==","title":"Testing Posts","htmlContent":"So now we can create and show posts, but we are never done with code until we've written automated tests for it. So we'll have to setup our test environment and make a few controller- or route-level tests.
"},{"id":"T0E6OlNlY3Rpb24tNjg0MA==","title":"Installing Mocha and Chai & Hello World Test","htmlContent":"Mocha.js is a test framework for Node.js, and Chai.js is an assertion library that does the work of determining whether a test passes or fails. chai-http makes it easy for us to make test http requests to our server. Let's add them to our project and run our first test.
\nWe're going to add these to our devDependencies in our package.json file because we don't need the testing libraries in production.
$ npm install mocha chai chai-http -D\n\n
Note: -D is just a shorthand for --save-dev. Both save the package to our devDependencies
Now create a folder called test in the root of your project.
Add a file to your new test folder called index.js and let's require our testing libraries and then create our first hello world style test.\nWe can use assert, expect, or should. Check out this Stack Overflow article to get a better understanding of the differences. In this tutorial we will use should.\nUsing destructuring, we will import describe and it from mocha in order to keep our linter happy.
// test/index.js\nconst chai = require('chai');\nconst chaiHttp = require('chai-http');\nconst { describe, it } = require('mocha');\nconst app = require('../server');\nconst agent = chai.request.agent(app);\n\nconst should = chai.should();\n\nchai.use(chaiHttp);\n\ndescribe('site', function () {\n // Describe what you are testing\n it('Should have home page', function (done) {\n // Describe what should happen\n // In this case we test that the home page loads\n agent\n .get('/')\n .end(function (err, res) {\n if (err) {\n return done(err);\n }\n res.should.have.status(200);\n return done(); // Call done if the test completed successfully.\n });\n });\n});\n\n
This test tests that the response should have a status of 200 - which if you recall your HTTP status codes, means the response is successful.
\nNotice we did not use ES6 syntax for our anonymous functions in our tests. That is because using arrow functions is discouraged in Mocha, as they make it so that this cannot access the Mocha context.
What is happening to this to cause the issue? Hint: it relates to scope.
Before we can run any of our tests, we're going to need to add a line to server.js that exports our app variable that mocha needs in order to successfully run our tests.
\nAdd this line to the bottom of server.js:
module.exports = app;\n\n
Now let's run the test.
\nFirst update your package.json file to have a test command:
\"scripts\": {\n \"test\": \"mocha --exit\"\n},\n\n
Note: the --exit command exits the tests after they are done
In order for this test to run the server will have to be running on localhost 3000, so make sure you've killed nodemon before running your tests.
\nNow we can run our tests with:
\n$ npm run test\n\nWhat was the result? Can you make the test fail?
"},{"id":"T0E6OlNlY3Rpb24tNjg0MQ==","title":"Testing /Posts/Create","htmlContent":"Next let's make a test for the /posts/create route we made. We can make a new file in test called posts.js.
\nCreate /test/posts.js with some boilerplate code that we'll need for testing
// test/posts.js\nconst chai = require('chai');\nconst chaiHttp = require('chai-http');\nconst { describe, it } = require('mocha');\nconst agent = chai.request.agent(app);\n\n// Import the Post model from our models folder so we\n// we can use it in our tests.\nconst Post = require('../models/post');\nconst app = require('../server');\n\nconst should = chai.should();\n\nchai.use(chaiHttp);\n\ndescribe('Posts', function () {\n // Post that we'll use for testing purposes\n const newPost = {\n title: 'post title',\n url: 'https://www.google.com',\n summary: 'post summary'\n };\n it('should create with valid attributes at POST /posts/new', function (done) {\n // TODO: test code goes here!\n });\n});\n\n
Let's think about what we want our test to...well, test. It can be helpful to think about test parameters in pseudocode so that we don't get bogged down in code just yet:
// How many posts are there now?\n// Make a request to create another\n// Check that the database has one more post in it\n// Check that the response is successful\n
Now let's take this pseudocode and make something of it! For these tests we're going to take advantage of a lot of mongoose's built in functions, such as estimatedDocumentCount.
\nFill in the it statement to fulfill the needs of the pseudocode:
it('Should create with valid attributes at POST /posts/new', function(done) {\n // Checks how many posts there are now\n Post.estimatedDocumentCount()\n .then(function (initialDocCount) {\n agent\n .post('/posts/new')\n // This line fakes a form post,\n // since we're not actually filling out a form\n .set('content-type', 'application/x-www-form-urlencoded')\n // Make a request to create another\n .send(newPost)\n .then(function (res) {\n Post.estimatedDocumentCount()\n .then(function (newDocCount) {\n // Check that the database has status 200\n res.should.have.status(200);\n // Check that the database has one more post in it\n newDocCount.should.equal(initialDocCount + 1)\n done();\n })\n .catch(function (err) {\n done(err);\n });\n })\n .catch(function (err) {\n done(err);\n });\n })\n .catch(function (err) {\n done(err);\n });\n});\n\n
This is a good test, but there's one problem: each time we run our test suite we will be creating this post. We need to make sure we delete this post after we run the test. We can use mongoose's findOneAndDelete function to easily help us with this, as well as Mocha's after hook, which is used to clean up after tests have finished running.
\nUpdate your test to remove the post at the by utilizing mocha's after hook:
it('Should create with valid attributes at POST /posts/new', function(done) {\n\n...\n\n});\n\nafter(function () {\n Post.findOneAndDelete(newPost);\n});\n\n
Also add after to your deconstruction of require('mocha') to rid yourself of any linter warnings
Now we have a test for the /posts/create route that should be green! Can you make it fail? How about if our post object doesn't have a title, url, or summary? Those are all required fields. What do you see if you change that and run the test? Does it fail? How do you know what made it fail?
When a controller or route test runs, it runs itself and it hits your server endpoint code locally. That means you can put console.log or debugger statements in either one to check various values.
$ git add .\n$ git commit -m 'Post tests implemented'\n$ git push\nGreat test writing! With these tests written you've successfully implemented more intricate tests for your CRUD app! Now let's add some more complexity to this app. Onward!
"}]},"next":{"id":"T0E6OlBhZ2UtMTU4OA==","slug":"create-subreddits","title":"Creating Subreddits"},"previous":{"id":"T0E6OlBhZ2UtMTU4OA==","slug":"create-subreddits","title":"Creating Subreddits"}},{"id":"T0E6OlBhZ2UtMTU4OA==","title":"Creating Subreddits","slug":"create-subreddits","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODAzMw==","title":"Creating Subreddits","htmlContent":"We've got posts, but let's categorize them into subreddits.
subreddit attribute to our post resourceIn Reddit, all posts are associated with one or more \"subreddit\". You can view subreddits by navigating to the path /r/<<NAME OF SUBREDDIT>>. For example some wonderful giggle-fests include /r/funny, /r/youtubehaiku.
In general this pattern is called \"categories\". Its used all over the web. Consider news stories that have 1 category like \"Politics\" or \"World Affairs\" or \"Sports\". Or think about products that have 1 category like \"Home\" or \"Wellness\" or \"Grocery\". We're going to categorize our posts, in the context of Reddit, these categories are called \"Subreddits\".
It might seem quite complex to create subreddits, but using the flexibility and powers of a schemaless, document-based database, we can actually make subreddits extremely quickly!
"},{"id":"T0E6OlNlY3Rpb24tODAzNQ==","title":"Thinking Like MongoDB","htmlContent":"If we were using a SQL database we would have to make a new table called \"subreddits\" and then we would do a join between posts and their parent subreddit. However, in a schemaless database we can save the name of the subreddit with the post, and search for all posts with a subreddit. Let's look at how we'd implement this simple solution.
\nFirst, we work from what the users sees, so we need to add a subreddit field to our posts form in posts-new.
<div class=\"form-group\">\n <label for=\"post-subreddit\">Subreddit</label>\n <input name=\"subreddit\" type=\"text\" class=\"form-control\" id=\"post-subreddit\" placeholder=\"Subreddit\">\n</div>\n\n
Next we update our Post model to have a subreddit attribute. This attribute will just be a String.
subreddit: { type: String, required: true },\n\n
After that, your form should look like this:
Now when you make a new post, you should be able to type in a subreddit string and save the post.
The post should save with its new subreddit string, but we won't be able to see it just yet.
\nLet's see that subreddit by adding it to the display of our posts in posts-index.
<li class=\"list-group-item\">\n <div class=\"lead\">\n <a href=\"/posts/{{this._id}}\" class=\"lead\">{{this.title}}</a>\n </div>\n <a href=\"{{this.url}}\" target=\"_blank\">{{this.url}}</a>\n <div class=\"text-right\">{{this.subreddit}}</div>\n</li>\n\n
Now that posts can be categorized, let's make it so we can view all the posts of a single subreddit.
Once again, we start with what the user sees and can do. Let's turn each post's subreddit into a link that displays all posts of that subreddit. We'll use the same /r/<<SUBREDDIT NAME>> pattern as reddit does, but we'll use an 'n' for \"Node-Reddit\":
\nTweak your code in posts-index to allow for the subreddit to be a link:
<li class=\"list-group-item\">\n <div class=\"lead\">\n <a href=\"/posts/{{this._id}}\" class=\"lead\">{{this.title}}</a>\n </div>\n <a href=\"{{this.url}}\" target=\"_blank\">{{this.url}}</a>\n <div class=\"text-right\">\n <a href=\"/n/{{this.subreddit}}\">{{this.subreddit}}</a>\n </div>\n</li>\n\n
Now if you click this link what happens? No route!
"},{"id":"T0E6OlNlY3Rpb24tODAzNw==","title":"Resolving the /n/subreddit Route","htmlContent":"Let's see if we can make this route work.
\nAs a sanity check on our route setting, let's have the terminal output the subreddit name in the url when you navigate to it. Add the following code to your posts controller. Remember to put it AFTER you require all the middleware:
// SUBREDDIT\napp.get('/n/:subreddit', (req, res) => {\n console.log(req.params.subreddit);\n});\n\n
Async/Await stretch challenge!
Refactor the code block above to be async/await.\nIf you get stuck, there are video and text resources linked at the first async/await stretch challenge in the Displaying All Posts section.
\nLet's switch out our console log for an actual navigation to our subreddit! We want to ensure that we only return posts that have a subreddit that matches the one passed into the url.
We can also reuse our posts-index template for displaying our posts in the subreddit!
\nTweak your app.get('/n/:subreddit' call to return actual posts:
// SUBREDDIT\napp.get('/n/:subreddit', (req, res) => {\n Post.find({ subreddit: req.params.subreddit }).lean()\n .then((posts) => res.render('posts-index', { posts }))\n .catch((err) => {\n console.log(err);\n });\n});\n\n
Refactor the code block above to be async/await.
\nHow does that look? Are you getting just posts with that subreddit?
BOOM - Subreddits!
But before we forget...
"},{"id":"T0E6OlNlY3Rpb24tODAzOQ==","title":"Now Commit","htmlContent":"![\"SUBREDDIT](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P04-Create-Subreddits/assets/subreddit-form.png\" "\\"\\"")
\n ![\"SUBREDDIT](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P04-Create-Subreddits/assets/subreddit-home.png\" "\\"\\"")
\n ![\"SUBREDDIT](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P04-Create-Subreddits/assets/subreddit-page.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can see Subreddits'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA0MA==","title":"Stretch Challenge","htmlContent":"Make it possible for a post to have multiple subreddits. What would be the changes you would have to make to do that?
\nAlright next step! We can see those posts, let's comment on them.
/posts/show templateRemember, we are always coding using an agile and user-centric approach, so we are going to always start any feature from what the user sees and does. Then we'll code back towards what the server and code do.
So, if we want to allow users to comment on these posts, first we can add a comment form to our /posts/show page. This form will send its data to a path that resolves to the /comments/create action. The path for this link will follow the standard nested RESTful convention /<<PARENT RESOURCE PLURAL>>/<<PARENT ID>>/<<CHILD RESOURCE PLURAL>>.
\nLet's add the following form to posts-show so that we can write a comment if we're viewing a post:
<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <a href=\"{{post.url}}\" class=\"lead\">{{post.title}}</a>\n <p>{{post.summary}}</p>\n <form action=\"/posts/{{post._id}}/comments\" method=\"post\">\n <textarea class='form-control' name=\"content\" placeholder=\"Comment\"></textarea>\n <div class=\"text-right\">\n <button type=\"submit\" class=\"btn btn-primary\">Save</button>\n </div>\n </form>\n </div>\n</div>\n\n
If you submit the form, it fails because there is no POST route to /posts/{{post._id}}/comments yet. Let's fix that!
Now we need a create comment route. We can start with the code we used for the create route for posts.
\nRemember that a route can be called a number of different names: an endpoint, a webhook, a path, and others.
\nFollow the pattern you used for the Post resource to create a Comment resource:
\nCreate a comments controller as a new file comments.js in your controllers folder
module.exports = (app) => {\n\n};\n\n
\nExport the comments controller into server.js.
require('./controllers/comments.js')(app);\n\n
\nMake the CREATE in a nested route (hint: /posts/:postId/comments). Remember to put it AFTER you require all the middleware:
// CREATE Comment\napp.post('/posts/:postId/comments', (req, res) => {\n // INSTANTIATE INSTANCE OF MODEL\n const comment = new Comment(req.body);\n\n // SAVE INSTANCE OF Comment MODEL TO DB\n comment\n .save()\n // REDIRECT TO THE ROOT\n .then(() => res.redirect('/'))\n .catch((err) => {\n console.log(err);\n });\n});\n\n
\nCreate a Comment model in a comment.js file in your models folder
const { Schema, model } = require('mongoose');\n\nconst commentSchema = new Schema({\n content: { type: String, required: true },\n}, { timestamps: true });\n\nmodule.exports = model('Comment', commentSchema);\n\n
\nRequire the comment model in the comments controller
\nconst Comment = require('../models/comment');\n\n
Refactor all the code blocks above to be async/await.
\nAlright, let's check our work:
The Gotcha - the gotcha here is that if you just use the same code from posts.js you will only create comments in their own collection and not associate them with their parent post. We're going to use a Reference Association, which means we will reference the child document by its id in the parent's document. The child's id acts similarly to a Foreign Key in a SQL database. Let's get to it!
First we'll do the controller logic, then the model logic.
\nIn the controller we need find the parent Post from the :postId we have in the url parameters, then associate this parent with the comment by pushing the comment into an array in the parent's comments attribute that we haven't created yet.
Also remember to add a require for your Post model, since we'll now be using it within the comments controller. Lastly, remember to put the routes AFTER you require all the middleware
const Post = require('../models/post');\nconst Comment = require('../models/comment');\n\n...\n\n// CREATE Comment\napp.post('/posts/:postId/comments', (req, res) => {\n // INSTANTIATE INSTANCE OF MODEL\n const comment = new Comment(req.body);\n\n // SAVE INSTANCE OF Comment MODEL TO DB\n comment\n .save()\n .then(() => Post.findById(req.params.postId))\n .then((post) => {\n post.comments.unshift(comment);\n return post.save();\n })\n .then(() => res.redirect('/'))\n .catch((err) => {\n console.log(err);\n });\n});\n\n
Why did I recommend we use unshift here instead of push?
\nunshift adds an element to the front of an array, while push adds it to the end. Reddit puts its newest comments at the top, so we want the default order to be reverse chronological order.
\nNext we need to add an array attribute to the Post model.
comments: [{ type: Schema.Types.ObjectId, ref: 'Comment' }],\n\n
Refactor all the code blocks above to be async/await.
\nFinally, create some new comments and confirm that their _id's are being added to this comments attribute.
Now that we have the comments associated, we can see them in the parent post object.
\nLet's add them to the posts-show template below the new comment form.
![\"COMMENT](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P05-Comment-On-Post/assets/comment-form.png\" "\\"\\"")
\n {{#each post.comments}}\n {{this}}\n{{/each}}\n\nWhat do you see?
Just the id's right? When we do a reference association, we only save the id's into the parent's document. In order to replace these id's with the actual child document, we have to use the mongoose function .populate() when we fetch the parent from the database.
\nUpdate your SHOW call in your posts controller to be the following:
// LOOK UP THE POST\nPost\n .findById(req.params.id).lean().populate('comments')\n .then((post) => res.render('post-show', { post }))\n .catch((err) => {\n console.log(err.message);\n });\n\n
Refactor the code block above to be async/await.
\nNow do we see the comments? Sure do! Well...at least as an object...
In order to view just the content of the comment, you have to access the content attribute of each comment. You can add more style to these if you like, but let's start with just a paragraph tag.
\nUpdate your #each post.comments body in posts-show to display just the content and not the entire object:
{{#each post.comments}}\n <p>{{this.content}}</p>\n{{/each}}\n\nMake a comment, and it should look similar to this:
"},{"id":"T0E6OlNlY3Rpb24tODA0Nw==","title":"Now Commit","htmlContent":"![\"COMMENT](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P05-Comment-On-Post/assets/comment-done.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can comment'\n$ git push\nRight on! Let's keep at it!
"}]},"next":{"id":"T0E6OlBhZ2UtMTU5MA==","slug":"sign-up-and-login","title":"Sign Up, Logout, and Login"},"previous":{"id":"T0E6OlBhZ2UtMTU5MA==","slug":"sign-up-and-login","title":"Sign Up, Logout, and Login"}},{"id":"T0E6OlBhZ2UtMTU5MA==","title":"Sign Up, Logout, and Login","slug":"sign-up-and-login","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODA0OA==","title":"Sign Up, Logout, and Login","htmlContent":"Alright next step! Its time to allow people to take responsibility for the silly things they are posting on our Reddit clone. We are going to create user accounts so folks can securely signup and login using a username and password.
/sign-up route, template and form/sign-up route and logicUser model/login route, template and form/login route and logicAlways think first about what the user's experience should be, and then develop for that. We'll follow the convention of a \"sign up / login\" links living in the navbar of our project.
\nUpdate /views/partials/navbar.handlebars to include logout, login and sign-up links:
<nav class=\"navbar navbar-default\">\n <div class=\"container-fluid\">\n ...\n <ul class=\"nav navbar-nav navbar-right\">\n <li><a href=\"/logout\">Logout</a></li>\n <li><a href=\"/login\">Login</a></li>\n <li><a href=\"/sign-up\">Sign Up</a></li>\n </ul>\n </div>\n</nav>\n\n
Now that we have the links, let's make the /sign-up route work.
\nMake a new controller file called /controllers/auth.js to put all our authentication routes.
module.exports = (app) => {\n // SIGN UP FORM\n app.get('/sign-up', (req, res) => res.render('sign-up'));\n};\n\n
Remember to add this new controller as a require within sever.js:
require('./controllers/auth.js')(app);\n\n
Now we can create our sign up form with username and password fields.
\nUse the template code you used to create a post but alter it to fit a username/password form. This should be a new files in your views folder called sign-up Don't forget:
![\"AUTH](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P06-Sign-Up-And-Login/assets/auth-home.png\" "\\"\\"")
\n password\n/sign-up\nDefine a User model. Add a new file called user.js in your models folder.
const { Schema, model } = require('mongoose');\n\nconst userSchema = new Schema({\n username: { type: String, required: true },\n password: { type: String, select: false },\n}, { timestamps: true });\n\nmodule.exports = model('User', userSchema);\n\n
Next define a route /sign-up in /controllers/auth.js.
const User = require('../models/user');\n\nmodule.exports = app => {\n ...\n // SIGN UP POST\n app.post('/sign-up', (req, res) => {\n // Create User\n const user = new User(req.body);\n\n user\n .save()\n .then(() => res.redirect('/'))\n .catch((err) => {\n console.log(err.message);\n });\n });\n};\n\n
Refactor the code block above to be async/await.
\nYour form should look similar to this:
Now we have a user model, but if we save our password it will be saved in our database as plaintext and not be secure.
"},{"id":"T0E6OlNlY3Rpb24tODA1Mg==","title":"Encrypting the Password","htmlContent":"The special issue we have with users is that we can't know their password, so we have to encrypt it. To do that we'll use a project called bcrypt that gives us some easy methods to encrypt passwords and save a secure hashed password instead of the actual password.
\nYou can think of hashing as a function whose input is text (or anything) and whose output is a hashed string: a new, very large string that isn't even remotely similar to the input string.\nIf you want to learn more check out this video made by Simply Explained.
\n\nThis function can also take in the hashed string as an input and provide the original, pre-hashed string as an output. The idea being that only this function can convert between the two, and that unless you have the secret sauce in that specific instance of that function, you won't be able to crack the hashed string.
\nAll this bcrypt logic will live in the user model. What we'll do is:
![\"SIGNUP](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P06-Sign-Up-And-Login/assets/sign-up-form.png\" "\\"\\"")
\n bcryptjs to our project and require it in our model.password attribute is being modified, and if it is, salt and hash the password to produce a hashed password that we'll save into the database.comparePassword() that takes in an attempted password and returns true or false if the attempt matches what is in the database.You'll need to 'salt' the password. Read about 'salting' here. While you can include a your secret 'salt' value in an environment variable that is accessible throughout node. We can use dotenv library to help.
dotenv..env and define a variable with the following key-value syntax. Define SECRET as the key, and somehashvalue as the value: SECRET=somehashvalue. somehashvalue can be any random set of characters.require('dotenv').config(); as early as possible in your project. Adding it at the top of server.js is probably a good idea.Read more about dotenv here.
\nRead this implementation closely and implement the same into your User model.
const { Schema, model } = require('mongoose');\nconst bcrypt = require('bcryptjs');\n\nconst userSchema = new Schema({\n username: { type: String, required: true },\n password: { type: String, select: false },\n}, { timestamps: true });\n\n// Must use function expressions here! ES6 => functions do not bind this!\nuserSchema.pre('save', function (next) {\n // ENCRYPT PASSWORD\n const user = this;\n if (!user.isModified('password')) {\n return next();\n }\n bcrypt.genSalt(10, (err, salt) => {\n bcrypt.hash(user.password, salt, (_, hash) => {\n user.password = hash;\n next();\n });\n });\n});\n\n// Need to use function to enable this.password to work.\nuserSchema.methods.comparePassword = function (password, done) {\n bcrypt.compare(password, this.password, (err, isMatch) => {\n done(err, isMatch);\n });\n};\n\nmodule.exports = model('User', userSchema);\n\n
Now let's sign up and check if our password was encrypted. We'll be able to see if the password is salted and hashed, and later we'll be able to test if the encryption actually worked when we create the login form.
"},{"id":"T0E6OlNlY3Rpb24tODA1Mw==","title":"Create JWT Tokens and Cookies","htmlContent":"Besides just creating a user document when the user signs up, we also want to log that user in to our application. What does it mean to be logged in? To be authenticated?
In our case, being logged in will mean that there is an authentic JWT token - a JSON Web Token - set as a cookie. This token is another piece of neat encryption that uniquely identifies a specific user. We'll use a library called jsonwebtoken to generate this token, and then we'll use cookie-parser to set this token as a cookie.
\nInstall cookie-parser and jsonWebToken:
npm install cookie-parser jsonwebtoken\n\n
Use middleware to to authenticate tokens and attach them to req object passed to routes.
First, we generate JSON Web Tokens (JWTs) --- consequently, we need to require the jsonwebtoken module we just installed at the top of the auth.js controller. We will use it to generate a JWT after the new user document is saved.
\nUpdate TOP of auth.js with the require, and then edit the SIGN UP POST method as shown below. Remember the route goes AFTER you require all the middleware:
const jwt = require('jsonwebtoken');\n...\n// SIGN UP POST\napp.post('/sign-up', (req, res) => {\n // Create User and JWT\n const user = new User(req.body);\n\n user\n .save()\n .then((user) => {\n const token = jwt.sign({ _id: user._id }, process.env.SECRET, { expiresIn: '60 days' });\n return res.redirect('/');\n })\n .catch((err) => {\n console.log(err.message);\n return res.status(400).send({ err });\n });\n});\n...\n\n
Next we need to set the JWT as a cookie so that it will be included in all future requests from the current user's client.
\nNext we include cookieParser and jsonWebToken in the project by requiring them in the server.js file so that their methods can be used anywhere in the app.
...\nconst cookieParser = require('cookie-parser');\n...\nconst app = express();\n...\napp.use(cookieParser()); // Add this after you initialize express.\n...\n\n
Next we'll set the cookie. (We'll want our JWT cookie variable's name to bit unique so it doesn't get confusing with other sites, so we'll use the variable nToken.)
\nWe want to set the cookie when someone signs up and logs in. In the auth.js controller, update the post /sign-up route:
...\n user\n .save()\n .then(() => {\n const token = jwt.sign({ _id: user._id }, process.env.SECRET, { expiresIn: '60 days' });\n res.cookie('nToken', token, { maxAge: 900000, httpOnly: true });\n return res.redirect('/');\n });\n...\n
Now lets see if the cookie is set by examining the cookies in the client.
\nGo through the Sign Up flow on Reddit.js. Then open the Developer Tools, and view the cookies under Developer Tools > Application tab > Cookies, or by typing in document.cookies in the client console. Do you see the cookie?
Refactor all the code blocks above to be async/await.
\n$ git add .\n$ git commit -m 'Users can sign up'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA1Ng==","title":"Let's Logout","htmlContent":"Now that we have signed up, let's log out. Since \"being logged in\" just means that the cookie is set, we can create a new /logout route that just removes this cookie.
\nIt might be more accurate to use the DELETE method, because we are sort of deleting something, but we will just use the get method to simplify our requests at this point.
\n\nUpdate the auth.js controller to include a logout method. Remember to put it AFTER you require all the middleware:
// LOGOUT\n app.get('/logout', (req, res) => {\n res.clearCookie('nToken');\n return res.redirect('/');\n });\n\n
After you click the \"Logout\" link is the cookie still present in the server in req.cookies or in the client in Dev Tools > Application > Cookies?
$ git add .\n$ git commit -m 'Users can log out'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA1OA==","title":"Let's Login","htmlContent":"Now that we've signed up, logged out, now let's login. We can use the same pattern as we did with the /sign-up routes, with one GET and one POST both with the path /login.
\nFirst let's build the GET route and template. You can copy and modify the sign up template to create login template. Remember to put it AFTER you require all the middleware:
\n// LOGIN FORM\n app.get('/login', (req, res) => res.render('login'));\n\n
Use the sign-up template code to make a new login view. It should be a very similar form to what you used for sign-up. Be sure to change the action field on the form!
The form should look like the following:\n\n ![\"LOGIN](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P06-Sign-Up-And-Login/assets/login-form.png\" "\\"\\"")
\n
\nNow let's make the logic for the POST route to /login work. Remember to put it AFTER you require all the middleware:
// LOGIN\napp.post('/login', (req, res) => {\n const { username, password } = req.body;\n // Find this user name\n User.findOne({ username }, 'username password')\n .then((user) => {\n if (!user) {\n // User not found\n return res.status(401).send({ message: 'Wrong Username or Password' });\n }\n // Check the password\n user.comparePassword(password, (err, isMatch) => {\n if (!isMatch) {\n // Password does not match\n return res.status(401).send({ message: 'Wrong Username or password' });\n }\n // Create a token\n const token = jwt.sign({ _id: user._id, username: user.username }, process.env.SECRET, {\n expiresIn: '60 days',\n });\n // Set a cookie and redirect to root\n res.cookie('nToken', token, { maxAge: 900000, httpOnly: true });\n return res.redirect('/');\n });\n })\n .catch((err) => {\n console.log(err);\n });\n});\n\n
Refactor the code block above to be async/await.
\n$ git add .\n$ git commit -m 'Users can log in'\n$ git push\nPhew!
If we did everything right, now we should be able to sign up, log out, and login securely. This means that you have successfully implemented an authentication flow through JWTs that allows users to sign up, log in, and log out. Nice!
In the next chapter we'll associate our user record with our posts and comments.
"},{"id":"T0E6OlNlY3Rpb24tODA2MQ==","title":"Stretch Challenges: More Authentication Patterns","htmlContent":"\nThere is a lot more to make a full fledged authentication system. See which ones you want to try:
\n\nAdd a Remember Me checkbox. What is the difference from when it is checked or not?
Require a password confirmation field.
Plan out how you would do a \"forget password\" process.
Alright next step! Its time to allow people to take responsibility for the silly things they are posting on our Reddit clone. We are going to create user accounts so folks can securely signup and login using a username and password.
req.user and currentUser objectsauthor attribute to comments and postsSo now that we are setting the cookie to be logged in, and can see this cookie on the server or client side, how do we customize our views and the authorization of a user? There are a few ways to do it. We could use client JavaScript to track the presence of the nToken cookie and update the DOM based on that. But let's try to find a server-side solution first because our app is very server-side structured now.
We can always check if req.cookies.nToken is present, but shouldn't we also check if it is valid? And don't we really want the _id of the user this token represents? This is a lot of code to include in every route! In order to refactor this code, we can make our own custom middleware.
\nCreate a new folder middleware. In that folder create the file checkAuth.js.
const jwt = require('jsonwebtoken');\n\nconst checkAuth = (req, res, next) => {\n console.log('Checking authentication');\n if (typeof req.cookies.nToken === 'undefined' || req.cookies.nToken === null) {\n req.user = null;\n } else {\n const token = req.cookies.nToken;\n const decodedToken = jwt.decode(token, { complete: true }) || {};\n req.user = decodedToken.payload;\n }\n\n next();\n};\n\nmodule.exports = checkAuth;\n\n
We can now import the middleware into server.js and use it as a middleware before every route.\nBe sure to place app.use(checkAuth); before the controllers.
...\nconst checkAuth = require('./middleware/checkAuth');\n...\napp.use(checkAuth);\n...\n\n
Go to any route and see if the Checking authentication is logged in the terminal.
Note: this is your own custom middleware like body-parser and cookie-parser. Middleware is run in the order it is added via app.use(). You must add middleware after initializing Express, and the order will matter.
Once our checkAuth middleware is running on every route, let's use the new req.user object we created to create a currentUser object. We'll use this currentUser object to hide the login and sign up links if a user is logged in.
\nUpdate your navbar to include the logic around currentUser:
<ul class=\"nav navbar-nav navbar-right\">\n {{#if currentUser}}\n <li><a href=\"/logout\">Logout</a></li>\n {{else}}\n <li><a href=\"/login\">Login</a></li>\n <li><a href=\"/sign-up\">Sign Up</a></li>\n {{/if}}\n</ul>\n\n
Now in any route we can set currentUser equal to req.user which will either be { _id: <<ID>> } or null.
\nUpdate the INDEX method in your posts controller to include currentUser:
app.get('/', (req, res) => {\n const currentUser = req.user;\n\n Post.find({})\n .then((posts) => res.render('posts-index', { posts, currentUser }))\n .catch((err) => {\n console.log(err.message);\n });\n});\n\n
Refactor the code block above to be async/await.
\nDo the login and sign up links appear and disappear depending upon whether a user is logged in?
Now, hide the \"New Post\" button for those who are NOT logged in.
\nUpdate your navbar again to hide the \"New Post\" button if a user is not logged in:
...\n\n<ul class=\"navbar-nav mr-auto\">\n {{#if currentUser}}\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"/posts/new\">New Post</a>\n </li>\n {{/if}}\n</ul>\n\n...\n\n
Remember, you'll have to add currentUser to all of the routes that call res.render() so the main templates work. This may seem like some duplication of code, and it is.
Right now, if you aren't logged in, you could still just navigate to /posts/new and create a post. Let's be a bit more secure and prevent someone from creating a post unless they are logged in.
\nUpdate your CREATE method in the posts controller to the following:
// CREATE\napp.post('/posts/new', (req, res) => {\n if (req.user) {\n const post = new Post(req.body);\n\n post.save(() => res.redirect('/'));\n } else {\n return res.status(401); // UNAUTHORIZED\n }\n});\n\n
Refactor the code block above to be async/await.
\nLogged in Vs logged out users should now have different views:
Logged Out\n\n ![\"LOGGED](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P07-Associate-Posts-And-Comments-With-User/assets/logged-out.png\" "\\"\\"")
\n
Logged In\n\n ![\"LOGGED](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P07-Associate-Posts-And-Comments-With-User/assets/logged-in.png\" "\\"\\"")
\n
We could do this more elegantly and more DRY if we made another example of custom middleware called CheckAuth and used it on those routes that we require to be logged in.
Can you rewrite the above code into its own middleware called CheckAuth?
$ git add .\n$ git commit -m 'Users must be logged in to submit a post'\n$ git push\nThrough the code above, you have now successfully restricted functionality based on authentication status. Right on!
"},{"id":"T0E6OlNlY3Rpb24tODA2OA==","title":"Associating the author of Comments and Posts","htmlContent":"So now we want people to take responsibility for their silly posts on Reddit.js.
We need to make each post and each comment point back to its author, as well as ensure the posts and comments are persisted with associations to the user that creates them. We'll do this by saving the author's user id in each child post or comment, and by tracking the post and comment id's for each user. Then we can use the .populate() method to pull in the details whenever we need.
To accomplish this, there are no changes required to the views we've already created. We can go straight to updating model and controller appropriately.
\nFirst, let's add an author attribute to both the models/comment.js and the models/post.js files. Its type will be a single ObjectId. We'll make it required because only logged in people can create posts.
...\nauthor: { type: Schema.Types.ObjectId, ref: 'User', required: true },\n...\n\n
Additionally, add the posts attribute to the User model. It will be an array of ObjectIds.
...\nposts: [{ type: Schema.Types.ObjectId, ref: 'Post' }],\n...\n\n
Now we can update the posts controller to save the current user as the author when we create a post,\nand we can look up the current user and add the new post to their posts.
\nUpdate the CREATE method of your posts controller to the following. Remember to include the User model as a new requirement:
const Post = require('../models/posts');\nconst User = require('../models/user');\nconst Comment = require('../models/comment');\n\nmodule.exports = (app) => {\n...\n // CREATE\n app.post('/posts/new', (req, res) => {\n if (req.user) {\n const userId = req.user._id;\n const post = new Post(req.body);\n post.author = userId;\n\n post\n .save()\n .then(() => User.findById(userId))\n .then((user) => {\n user.posts.unshift(post);\n user.save();\n // REDIRECT TO THE NEW POST\n return res.redirect(`/posts/${post._id}`);\n })\n .catch((err) => {\n console.log(err.message);\n });\n } else {\n return res.status(401); // UNAUTHORIZED\n }\n });\n...\n}\n\n
Refactor the code block above to be async/await.
\nTest that both the author and the posts are being saved by looking in your database or logging to the console.
Now, can you do this same pattern for the comments controller when someone creates a comment?
"},{"id":"T0E6OlNlY3Rpb24tODA2OQ==","title":"Displaying the Author","htmlContent":"Next, populate the author in posts and display their username on every post wherever it appears.
Let's start by just getting the author field to appear on the posts you see on the home page.
\nAdd the author below the url in posts-index:
<div><small>{{this.author}}</small></div>\n\n
If you refresh right now, you'll just see an ObjectId for the author. We need to populate the field!
\npopulate the author field from the INDEX method in the posts controller:
// INDEX\napp.get('/', (req, res) => {\n const { user } = req;\n console.log(req.cookies);\n Post.find({}).lean().populate('author')\n .then((posts) => res.render('posts-index', { posts, user }))\n .catch((err) => {\n console.log(err.message);\n });\n});\n\n
Refactor the code block above to be async/await.
\nNow you should be seeing a User object! We're almost there, just update your posts-index to pull from the username field within author
\nUpdate the author div in posts-index:
<div><small>{{this.author.username}}</small></div>\n\n
Now we have authors properly displayed on the home page! We still need to get authors to display when looking at a single post, and when looking at a specific subreddit.
Let's work on the single post first, this should be very similar to what we just did for the home page.
\nUpdate posts-show to include the author:
<p>{{post.author.username}}</p>\n\n
Update SHOW in the posts controller to populate the author:
// LOOK UP THE POST\napp.get('/posts/:id', (req, res) => {\n const currentUser = req.user;\n\n Post.findById(req.params.id).lean().populate('comments').populate('author')\n .then((post) => res.render('posts-show', { post, currentUser }))\n .catch((err) => {\n console.log(err.message);\n });\n});\n\n
Note we did a double call to populate in order to get both fields!
Finally, let's get author showing for posts on a subreddit.
\nUpdate the SUBREDDIT method in posts controller to display the author on posts:
// SUBREDDIT\napp.get('/n/:subreddit', (req, res) => {\n const currentUser = req.user;\n const { subreddit } = req.params;\n Post.find({ subreddit }).lean().populate('author')\n .then((posts) => res.render('posts-index', { posts, currentUser }))\n .catch((err) => {\n console.log(err);\n });\n});\n\n
Refactor all the code blocks above to be async/await.
\n![\"AUTHOR](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P07-Associate-Posts-And-Comments-With-User/assets/author-home.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Authors for posts are visible'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA3Mw==","title":"Now for Comments","htmlContent":"Using the previous instructions for associating users and posts, can you make it so users and comments are equally associated? Remember to update the corresponding view and controller files!
Hint: You should review the documentation for Mongoose's populate method. Also look in to how you would nest populate calls.
\nCreate the template post-comments and include author in each comment:
{{#each post.comments}}\n <p>{{this.content}}</p>\n <p class=\"text-right\">{{this.author.username}}</p>\n{{/each}}\n\nUpdate comments controller to include the author
...\nconst comment = new Comment(req.body);\ncomment.author = req.user._id;\n...\n\n
Update the SHOW method in the posts controller to populate the author of the comments:
// SHOW\napp.get('/posts/:id', function (req, res) {\n const currentUser = req.user;\n // LOOK UP THE POST\n\n Post.findById(req.params.id).lean().populate({ path:'comments', populate: { path: 'author' } }).populate('author')\n .then((post) => res.render('posts-show', { post, currentUser }))\n .catch((err) => {\n console.log(err.message);\n });\n});\n\n
Authors should now be displayed for both Posts and Comments. Try posting as one user, and commenting as another to see it in action:
"},{"id":"T0E6OlNlY3Rpb24tODA3NQ==","title":"Now Commit","htmlContent":"![\"COMMENT](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P07-Associate-Posts-And-Comments-With-User/assets/author-comment.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Authors for comments are visible'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA3Ng==","title":"Stretch Challenges","htmlContent":"/users/:username?/profile route that loads the current user and displays their posts and comments?So we can do authentication, but what if the next time we turn around, this feature breaks? How would we catch it? The answer is more automated tests!
So it is really fun to test things right!?
Maybe not so fun, but writing tests is a critical skill for a young engineer. At almost all companies, all code must have tests that go along with it. And at many companies, young engineers are tasked with writing tests and crushing bugs for their first few weeks, so knowing how to test well will make you a very hirable and quick-to-ramp employee.
"},{"id":"T0E6OlNlY3Rpb24tNjkwMw==","title":"Testing Authentication","htmlContent":"Testing RESTful routes for a regular resource is pretty straightforward. There might be some quirks, but pretty much you just GET, POST, PUT, and DELETE data and verify that the responses are successful.
With authentication, however, testing gets a little more complicated. You have to check that JWTs are creating, that passwords are correct, and then you have to be prepared to test authorization.
The biggest challenge is tracking the cookie set by the server when a user logs in. In order to handle this cookie we can use chai's request agent functionality to track the cookie in our tests.
\nCreate the file test/auth.js. Within, we'll require the libraries we're going to need.
// test/auth.js\nconst chai = require('chai');\nconst chaiHttp = require('chai-http');\nconst { describe, it } = require('mocha');\nconst app = require('../server');\n\nconst should = chai.should();\n\nchai.use(chaiHttp);\n\n// Agent that will keep track of our cookies\nconst agent = chai.request.agent(app);\n\nconst User = require('../models/user');\n\ndescribe('User', function () {\n // TESTS WILL GO HERE.\n});\n\n
We can now write our first test that verifies that you cannot login if you haven't signed up yet.
\nAdd this test within your User block:
it('should not be able to login if they have not registered', function (done) {\n agent.post('/login', { email: 'wrong@example.com', password: 'nope' }).end(function (err, res) {\n res.should.have.status(401);\n done();\n });\n});\n\n
Let's add a slightly more complex one: signing up a user!
\nAdd this signup test to test/auth.js:
// signup\nit('should be able to signup', function (done) {\n User.findOneAndRemove({ username: 'testone' }, function() {\n agent\n .post('/sign-up')\n .send({ username: 'testone', password: 'password' })\n .end(function (err, res) {\n console.log(res.body);\n res.should.have.status(200);\n agent.should.have.cookie('nToken');\n done();\n });\n });\n});\n\n
It's important to note that the server started by the agent will not automatically close following the completion of your tests. It's important that we close down the agent after the tests to ensure the program exits appropriately.
\nAdd an after hook to your auth tests:
after(function () {\n agent.close();\n});\n\n
Do not forget to add after to your require statement.
$ git add .\n$ git commit -m 'Implemented initial authentication tests'\n$ git push\nBefore we go any further, try running your tests. Remember you need to kill nodemon first and then run npm run test.
Your auth tests should work fine, but notice that your posts test around creating a new post doesn't work anymore! This is because the way the test is currently written, you're not logged in and trying to post! Let's fix this before moving on.
Let's revisit our /test/posts file and see what needs to be done in order to get it up and running again.
First, we want to make sure we're using the agent that we used in our last auth tests, otherwise we'll have no way to pass cookies (like the kind that pass login information)
\nAdd the following line to the top of the file as the last const:
const agent = chai.request.agent(app);\n\n
Now we need to make sure we have a user.
\nAdd the following user below the newPost const:
const newPost = {\n...\n}\n\n// User that we'll use for testing purposes\nconst user = {\n username: 'poststest',\n password: 'testposts',\n};\n\n
Next we need to add a before hook. Much like the after hook cleans up our tests, before sets up anything we need in order for the tests to run, before the tests actually run.
\nUnderneath your new user const, add the following before hook that signs up a user:
before(function (done) {\n agent\n .post('/sign-up')\n .set('content-type', 'application/x-www-form-urlencoded')\n .send(user)\n .then(function (res) {\n done();\n })\n .catch(function (err) {\n done(err);\n });\n});\n\n
Remember to require before from mocha at the top of the file
Almost finished, just have to clean up now. Much like we deleted the test post in our after hook, we have to also delete the test user now too, in addition to closing the agent.
\nRequire your user model file at the top of the file
\nconst User = require('../models/user');\n\n
Replace your after hook with the following code block:
after(function (done) {\n Post.findOneAndDelete(newPost)\n .then(function () {\n agent.close();\n\n User\n .findOneAndDelete({\n username: user.username,\n })\n .then(function () {\n done();\n })\n .catch(function (err) {\n done(err);\n });\n })\n .catch(function (err) {\n done(err);\n });\n});\n\n
Try running your tests again. They should all pass now that the agent has the JWT cookie!
It's important to remember that when you add new functionality, it's helpful to go back and make sure your previous functionality (and tests) work as expected.
"},{"id":"T0E6OlNlY3Rpb24tNjkwNg==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Fixed posts test'\n$ git push\nLet's finish up our other tests back in test/auth!
What should we test next? Logging in!
Next, write a test that verifies that your login implementation works properly:
\nAdd this login test to test/auth.js:
// login\nit('should be able to login', function (done) {\n agent\n .post('/login')\n .send({ username: 'testone', password: 'password' })\n .end(function (err, res) {\n res.should.have.status(200);\n agent.should.have.cookie('nToken');\n done();\n });\n});\n\n
Can you make the test red (not pass) and then green (pass)?
Finally, we write a test to verify that the logout functionality works as expected.
\nAdd this logout test to test/auth.js:
// logout\nit('should be able to logout', function (done) {\n agent.get('/logout').end(function (err, res) {\n res.should.have.status(200);\n agent.should.not.have.cookie('nToken');\n done();\n });\n});\n\n
$ git add .\n$ git commit -m 'Implemented remaining authentication tests'\n$ git push\nYou have successfully implemented tests for authentication flows! If you feel like your tests aren't strong enough, and want to make your tests more robust (you know you want to), check out the challenges below:
"},{"id":"T0E6OlNlY3Rpb24tNjkwOQ==","title":"Stretch Challenges","htmlContent":"Can you write another test to test that it is impossible to create a post if a user is not logged in?
Can you make all of your auth tests not pass, and then pass? What about your newly updated post test?
So last lesson we were thinking through how to put comments inside other comments. Now we are going to actually do it!
We know we're going to be embedding comments into comments. This means we're going to have to nest populate calls for comments for as deep as a comment chain can go! Our current implementation can't scale for that, so before we embark on embedding comments, we need to make sure we can handle them by optimizing how we use populate.
We're going to be using our optimization in a lot of places, so we should make it a util so that it can be easily accessible through multiple places
\nAny time you have the same functionality used in multiple areas of a project, it's best to make a util folder where you can store all your functions for repeated use.
\nCreate a util folder, and create an autopopulate.js file in it
In autopopulate.js, place the following code:
module.exports = (field) => function (next) {\n this.populate(field);\n next();\n};\n\n
Great! Because this function recursively calls itself, we can now populate fields every time we load a model! Let's make some changes so that our posts and comments take advantage of this functionality.
\nUpdate /models/post.js and /models/comment.js to use your new util. We also need to update the schema in /models/comment.js to include a new comments property so that comments can support comments of their own:
/models/post.js
// models/post.js\nconst { Schema, model } = require('mongoose');\nconst Populate = require('../util/autopopulate');\n\nconst postSchema = new Schema({\n...\n});\n// Always populate the author field\npostSchema\n .pre('findOne', Populate('author'))\n .pre('find', Populate('author'));\n\nmodule.exports = model('Post', postSchema);\n\n
/models/comment.js
const { Schema, model } = require('mongoose');\nconst Populate = require('../util/autopopulate');\n\nconst commentSchema = new Schema({\n content: { type: String, required: true },\n author : { type: Schema.Types.ObjectId, ref: 'User', required: true },\n comments: [{ type: Schema.Types.ObjectId, ref: 'Comment' }],\n}, { timestamps: true });\n\n// Always populate the author field\ncommentSchema\n .pre('findOne', Populate('author'))\n .pre('find', Populate('author'))\n .pre('findOne', Populate('comments'))\n .pre('find', Populate('comments'));\n\nmodule.exports = model('Comment', commentSchema);\n\n
Finally, let's update our controllers to simplify their logic to just use the lean method.
\nSimplify your /posts/show/ and /subreddit/show/ methods in /controllers/post.js
// SHOW\napp.get('/posts/:id', (req, res) => {\n const currentUser = req.user;\n Post.findById(req.params.id).populate('comments').lean()\n .then((post) => res.render('posts-show', { post, currentUser }))\n .catch((err) => {\n console.log(err.message);\n });\n});\n\n// SUBREDDIT\napp.get('/n/:subreddit', (req, res) => {\n const { user } = req;\n Post.find({ subreddit: req.params.subreddit }).lean()\n .then((posts) => res.render('posts-index', { posts, user }))\n .catch((err) => {\n console.log(err);\n });\n});\n\n
Notice it was only a one line change for each, but it's a lot simpler now! One more refactor to go:
\nUpdate /comments/create in /controllers/comments to the following:
const Post = require('../models/post');\nconst Comment = require('../models/comment');\n\nmodule.exports = (app) => {\n // CREATE Comment\n app.post('/posts/:postId/comments', (req, res) => {\n const comment = new Comment(req.body);\n comment.author = req.user._id;\n comment\n .save()\n .then(() => Promise.all([\n Post.findById(req.params.postId),\n ]))\n .then(([post]) => {\n post.comments.unshift(comment);\n return Promise.all([\n post.save(),\n ]);\n })\n .then(() => res.redirect(`/posts/${req.params.postId}`))\n .catch((err) => {\n console.log(err);\n });\n });\n};\n\n
Refactor all the code blocks above to be async/await.
\nNow would be a good point to refresh your screen and make sure the authors on your comments and posts are still showing correctly. Notice also we are now redirecting users back to the post's page instead of root. Makes a lot more sense to go back to where you originated the request to reply from, doesn't it?
We did a lot of changes here, so let's commit what we have so far:
$ git add .\n$ git commit -m 'refactored populate code'\n$ git push\nYou have now successfully investigated how to use the populate method in Mongoose for advanced associations. Congrats!
All credit to Dacio Romero (a Make School student!) for creating this elegant solution! He even wrote a plugin to do exactly what we wrote above for our util!
Now that we have autopopulate, we can make it so a user can comment on a comment to create a nice hierarchical tree of nested comments.
Again, utilize the user experience as a starting point. A user who wants to make a comment on a comment can click a \"reply\" link that opens up a form displaying the specific comment and a textarea, as well as a Reply button.
\nAdd this snippet to /views/posts-show within the each block for comments:
{{#each post.comments}}\n <p>{{this.content}}</p>\n <p class=\"text-right\">{{this.author.username}}</p>\n <a href=\"/posts/{{../post._id}}/comments/{{this._id}}/replies/new\">Reply</a>\n{{/each}}\n ...\n\nLet's make a new replies.js file in our controllers folder. Within, we'll need access to both the Post and Comment models. At the end, we'll have two freshly implemented routes: NEW and CREATE.
\ncreate /controllers/replies and include the following code:
const Post = require('../models/post');\nconst User = require('../models/user');\nconst Comment = require('../models/comment');\n\nmodule.exports = (app) => {\n // NEW REPLY\n app.get('/posts/:postId/comments/:commentId/replies/new', (req, res) => {\n const currentUser = req.user;\n let post;\n Post.findById(req.params.postId).lean()\n .then((p) => {\n post = p;\n return Comment.findById(req.params.commentId).lean();\n })\n .then((comment) => {\n res.render('replies-new', { post, comment, currentUser });\n })\n .catch((err) => {\n console.log(err.message);\n });\n });\n\n // CREATE REPLY\n app.post('/posts/:postId/comments/:commentId/replies', (req, res) => {\n console.log(req.body);\n });\n};\n\n
Remember to require your new controller in server.js
require('./controllers/posts')(app);\nrequire('./controllers/comments.js')(app);\nrequire('./controllers/auth.js')(app);\nrequire('./controllers/replies.js')(app);\n\n
Next, create your replies-new template and have the content sit in the middle 6 columns of the 12 column grid:
\nCreate /views/replies-new in your /views folder and include the following code:
<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <form action=\"/posts/{{post._id}}/comments/{{comment._id}}/replies\" method=\"post\">\n <div class=\"form-group\">\n <textarea name=\"content\" class=\"form-control\" id=\"reply-content\" placeholder=\"Reply\"></textarea>\n </div>\n\n <div class='text-right'>\n <button type=\"submit\" class=\"btn btn-primary\">Reply</button>\n </div>\n </form>\n </div>\n</div>\n\n
Refresh the page and click the Reply button on a comment. We can see that our template and form is there, but what happens when we submit it? We made the create route and left a console.log(req.body), so if you submit that form, you should see the console log the content of the form submission. Do you see it?
The next step is to write our /replies/create route logic.
\nUpdate the /create method in /controllers/replies to the following:
// CREATE REPLY\napp.post('/posts/:postId/comments/:commentId/replies', (req, res) => {\n // TURN REPLY INTO A COMMENT OBJECT\n const reply = new Comment(req.body);\n reply.author = req.user._id;\n // LOOKUP THE PARENT POST\n Post.findById(req.params.postId)\n .then((post) => {\n // FIND THE CHILD COMMENT\n Promise.all([\n reply.save(),\n Comment.findById(req.params.commentId),\n ])\n .then(([reply, comment]) => {\n // ADD THE REPLY\n comment.comments.unshift(reply._id);\n return Promise.all([\n comment.save(),\n ]);\n })\n .then(() => res.redirect(`/posts/${req.params.postId}`))\n .catch(console.error);\n // SAVE THE CHANGE TO THE PARENT DOCUMENT\n return post.save();\n });\n});\n\n
When you submit the reply form, what occurs? Can you confirm (in the database) that a nested embedded comment document is created?
Finally, let's set up our post-show template to show these sub comments as well once they are created. If we just try to manually write in our comments and their comments, we won't be able to represent the whole tree. We'll need to use a Partial Template to make a recursive representation of all the comments and their comments.
\nIn /views/posts-show, replace your {{#each post.comments}} code block with the following:
{{#each post.comments}}\n {{> comment comment=this postId=../post._id}}\n{{/each}}\n\nWe've got our view set up to use our partial comments view, so now let's create that partial.
\nCreate a new folder in views called partials, then create a file in there called comment.handlebars. Inside that file, place the following code:
<div class=\"col-xs-12 comment-indent\">\n <p>{{comment.content}}</p>\n <p class=\"text-right\">{{comment.author.username}}</p>\n <a href=\"/posts/{{postId}}/comments/{{comment._id}}/replies/new\">Reply</a>\n {{#each comment.comments}}\n {{> comment comment=this postId=../postId}}\n {{/each}}\n</div>\n\n
The code inside this partial template calls itself so it loops until every comment is displayed.
Finally, let's give each comment a bit of an indent by creating a style for the class .comment-indent. Let's put this in a general stylesheet in case we want to add more styles later.
\nCreate a public folder and create a css folder within it. Within the css folder, create an all.css file and place the following code in it:
.comment-indent {\n margin-left: 20px;\n}\n\n
Remember we need to now link the style sheet in /views/layouts/main.handlebars so that we can view it:
<head>\n ...\n <link rel=\"stylesheet\" href=\"/css/all.css\">\n</head>\n\n
Refactor all the code blocks above to be async/await.
\nRefresh and try out your new nested comments!!
Now that we have a css folder, what other styles would you add? Add some more styling to spruce up your Reddit!
Credit again to Dacio Romero, who's /controllers/replies/post method was adapted to this tutorial, as well as his partials template!
![\"NESTED](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P09-Comments-On-Comments/assets/nested-comments.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Implemented nested comments'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA4Mg==","title":"Stretch Challenge","htmlContent":"\nNotice right now you can reply to a comment if you are not logged in. Update your code to figure out how to only allow logged in users to reply to comments
\nAlright, we've almost got our Reddit clone complete! We're on to the final piece: Voting!
To vote on something, you can usually can vote up and down. \"Liking\" in Facebook is like voting up, and there is no down. In Reddit however, we can vote things up and down. A few things make it quite tricky:
Let's start with how to vote up, and then see how we can vote down.
Post modelLet's make a plan by doing what we always do and look very carefully at what the user will be able to see and do with our app.
Start by adding \"vote up\" and \"vote down\" form to our post. Remember, this form, needs to be submitted via AJAX without refreshing the page! For that we're going to need to use jQuery and specifically AJAX requests to handle them without refreshing. We'll accomplish this with two specific HTML attributes:
Classes (Not Ids) - We'll add two forms, tag them with the class vote-up and vote-down. We'll use these classes as our selectors to fire off the AJAX request to vote up or down.
\nWe use classes here because IDs must be unique, but classes can repeat in one html template. In this case, there will be many posts on the /posts/index page, so we must use a class instead of an ID.
Data Attribute - Each of these posts is unique even if there are many on the page. How do we know which one we are voting on? How do we communicate this to the server? In order to solve this problem, we'll be using the data-id attribute and render the post's _id attribute in each form. Then we can pull that id into the /posts/:id/vote-up or /posts/:id/vote-down path when we submit the form.
For now, we'll keep voting on posts to only the home page.
\nUpdate the posts-index view to include the voting forms:
<li class=\"list-group-item\">\n <div class=\"lead\">{{post.title}}</div>\n <a href=\"{{post.url}}\" target=\"_blank\">{{post.url}}<a>\n <div><small>{{this.author.username}}</small></div>\n <div class=\"text-right\">\n <a href=\"/n/{{post.subreddit}}\">{{post.subreddit}}<a>\n </div>\n\n <form class=\"vote-up\" data-id=\"{{this._id}}\">\n <button type=\"submit\">Vote Up</button>\n </form>\n |\n <form class=\"vote-down\" data-id=\"{{this._id}}\">\n <button type=\"submit\">Vote Down</button>\n </form>\n</li>\n\n
We're going to add an AJAX request in a new file public/js/posts.js (Remember you already have a posts.js file! Be careful as you are navigating and updating your files.). We already included jQuery into this project when we added Bootstrap, so all our jQuery functions should work splendidly. But we need to add a few things first.
\nFirst we need to update server.js to look for static files in our new public folder. Add this line to server.js:
...\napp.use(express.static('public'));\n...\n\n
Next, let's add our new script to our <body> tag in layouts/main.handlebars where all our other scripts currently live. Make sure to put it below our jQuery script!
<body>\n ...\n <script src=\"https://code.jquery.com/jquery-3.3.1.min.js\" integrity=\"sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=\"\n crossorigin=\"anonymous\"></script>\n <script rel=\"script\" src=\"/js/posts.js\"></script>\n ...\n\n</body>\n\n
Finally, create a js folder in your public folder. Then create a posts.js file within the js folder. Now copy the following code into our newly created public/js/posts.js:
$(document).ready(function() {\n $('.vote-up').submit(function(e) {\n e.preventDefault();\n\n const postId = $(this).data('id');\n $.ajax({\n type: 'PUT',\n url: 'posts/' + postId + '/vote-up',\n success: function(data) {\n console.log('voted up!');\n },\n error: function(err) {\n console.log(err.messsage);\n }\n });\n });\n\n $('.vote-down').submit(function(e) {\n e.preventDefault();\n\n const postId = $(this).data('id');\n $.ajax({\n type: 'PUT',\n url: 'posts/' + postId + '/vote-down',\n success: function(data) {\n console.log('voted down!');\n },\n error: function(err) {\n console.log(err.messsage);\n }\n });\n });\n});\n\n
Now refresh your browser tab, open your Developer Tools and check the Network tab (you may need to turn recording on via cmd+R). If we click the vote up or down buttons, we should be able to see each request flying out to your server. Click on one and see what error is coming back. You can even preview the response. Route not found! Great! Let's set those up!
We want to track who voted on what, and we want to know what the total score of votes are.
\nUpdate the Post model to have three new attributes: upVotes, downVotes, and voteScore:
...\nupVotes : [{ type: Schema.Types.ObjectId, ref: 'User' }],\ndownVotes : [{ type: Schema.Types.ObjectId, ref: 'User' }],\nvoteScore : { type: Number },\n...\n\n
In the posts controller, update the create method to initialize these three new attributes:
...\nconst post = new Post(req.body);\npost.author = req.user._id;\npost.upVotes = [];\npost.downVotes = [];\npost.voteScore = 0;\n...\n\n
Now that we are submitting to the routes, we have to write them. Let's put them in the bottom of the controllers/posts.js file.
Reminder: we're using PUT because we are editing an existing resource.
\nAdd these voting routes to the posts controller:
app.put('/posts/:id/vote-up', (req, res) => {\n Post.findById(req.params.id).then((err, post) => {\n post.upVotes.push(req.user._id);\n post.voteScore += 1;\n post.save();\n\n return res.status(200);\n });\n});\n\napp.put('/posts/:id/vote-down', (req, res) => {\n Post.findById(req.params.id).then((err, post) => {\n post.downVotes.push(req.user._id);\n post.voteScore -= 1;\n post.save();\n\n return res.status(200);\n });\n});\n\n
Refactor the code blocks above to be async/await.
\nCreate a new post and see if you can vote up or down on your new post. Check the console logs to make sure the votes are being tracked appropriately.
If you made it this far, that means that you were able to successfully implement a large scale application using Express, Handlebars, and MongoDB/Mongoose.
CONGRATS!! You've built a clone of Reddit!
As you go through this BEW course, think about how you can tie the concepts you learned here – particularly auth and testing – and see how you can apply them in the course.
"},{"id":"T0E6OlNlY3Rpb24tODA4OQ==","title":"Feedback and Review - 2 minutes","htmlContent":"We promise this won't take longer than 2 minutes!
Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form
"},{"id":"T0E6OlNlY3Rpb24tODA5MA==","title":"Now Commit","htmlContent":"![\"FINAL](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Reddit-Clone@495e2076d7f7be6d4c82bb11a506815bd9896901/P10-Vote-On-A-Post/assets/final-reddit.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can now vote on posts'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA5MQ==","title":"Stretch Challenges","htmlContent":"If you're looking for more, check out the following:
Alright next step! Its time to allow people to take responsibility for the silly things they are posting on our Reddit clone. We are going to create user accounts so folks can securely signup and login using a username and password.
/sign-up route, template and form/sign-up route and logicUser model/login route, template and form/login route and logicAlways think first about what the user's experience should be, and then develop for that. We'll follow the convention of a \"sign up / login\" links living in the navbar of our project.
\nUpdate /views/partials/navbar.handlebars to include logout, login and sign-up links:
<nav class=\"navbar navbar-default\">\n <div class=\"container-fluid\">\n ...\n <ul class=\"nav navbar-nav navbar-right\">\n <li><a href=\"/logout\">Logout</a></li>\n <li><a href=\"/login\">Login</a></li>\n <li><a href=\"/sign-up\">Sign Up</a></li>\n </ul>\n </div>\n</nav>\n\n
Now that we have the links, let's make the /sign-up route work.
\nMake a new controller file called /controllers/auth.js to put all our authentication routes.
module.exports = (app) => {\n // SIGN UP FORM\n app.get('/sign-up', (req, res) => res.render('sign-up'));\n};\n\n
Remember to add this new controller as a require within sever.js:
require('./controllers/auth.js')(app);\n\n
Now we can create our sign up form with username and password fields.
\nUse the template code you used to create a post but alter it to fit a username/password form. This should be a new files in your views folder called sign-up Don't forget:
password\n/sign-up\nDefine a User model. Add a new file called user.js in your models folder.
const { Schema, model } = require('mongoose');\n\nconst userSchema = new Schema({\n username: { type: String, required: true },\n password: { type: String, select: false },\n}, { timestamps: true });\n\nmodule.exports = model('User', userSchema);\n\n
Next define a route /sign-up in /controllers/auth.js.
const User = require('../models/user');\n\nmodule.exports = app => {\n ...\n // SIGN UP POST\n app.post('/sign-up', (req, res) => {\n // Create User\n const user = new User(req.body);\n\n user\n .save()\n .then(() => res.redirect('/'))\n .catch((err) => {\n console.log(err.message);\n });\n });\n};\n\n
Refactor the code block above to be async/await.
\nYour form should look similar to this:
Now we have a user model, but if we save our password it will be saved in our database as plaintext and not be secure.
"},{"id":"T0E6OlNlY3Rpb24tODA1Mg==","title":"Encrypting the Password","htmlContent":"The special issue we have with users is that we can't know their password, so we have to encrypt it. To do that we'll use a project called bcrypt that gives us some easy methods to encrypt passwords and save a secure hashed password instead of the actual password.
\nYou can think of hashing as a function whose input is text (or anything) and whose output is a hashed string: a new, very large string that isn't even remotely similar to the input string.\nIf you want to learn more check out this video made by Simply Explained.
\n\nThis function can also take in the hashed string as an input and provide the original, pre-hashed string as an output. The idea being that only this function can convert between the two, and that unless you have the secret sauce in that specific instance of that function, you won't be able to crack the hashed string.
\nAll this bcrypt logic will live in the user model. What we'll do is:
bcryptjs to our project and require it in our model.password attribute is being modified, and if it is, salt and hash the password to produce a hashed password that we'll save into the database.comparePassword() that takes in an attempted password and returns true or false if the attempt matches what is in the database.You'll need to 'salt' the password. Read about 'salting' here. While you can include a your secret 'salt' value in an environment variable that is accessible throughout node. We can use dotenv library to help.
dotenv..env and define a variable with the following key-value syntax. Define SECRET as the key, and somehashvalue as the value: SECRET=somehashvalue. somehashvalue can be any random set of characters.require('dotenv').config(); as early as possible in your project. Adding it at the top of server.js is probably a good idea.Read more about dotenv here.
\nRead this implementation closely and implement the same into your User model.
const { Schema, model } = require('mongoose');\nconst bcrypt = require('bcryptjs');\n\nconst userSchema = new Schema({\n username: { type: String, required: true },\n password: { type: String, select: false },\n}, { timestamps: true });\n\n// Must use function expressions here! ES6 => functions do not bind this!\nuserSchema.pre('save', function (next) {\n // ENCRYPT PASSWORD\n const user = this;\n if (!user.isModified('password')) {\n return next();\n }\n bcrypt.genSalt(10, (err, salt) => {\n bcrypt.hash(user.password, salt, (_, hash) => {\n user.password = hash;\n next();\n });\n });\n});\n\n// Need to use function to enable this.password to work.\nuserSchema.methods.comparePassword = function (password, done) {\n bcrypt.compare(password, this.password, (err, isMatch) => {\n done(err, isMatch);\n });\n};\n\nmodule.exports = model('User', userSchema);\n\n
Now let's sign up and check if our password was encrypted. We'll be able to see if the password is salted and hashed, and later we'll be able to test if the encryption actually worked when we create the login form.
"},{"id":"T0E6OlNlY3Rpb24tODA1Mw==","title":"Create JWT Tokens and Cookies","htmlContent":"Besides just creating a user document when the user signs up, we also want to log that user in to our application. What does it mean to be logged in? To be authenticated?
In our case, being logged in will mean that there is an authentic JWT token - a JSON Web Token - set as a cookie. This token is another piece of neat encryption that uniquely identifies a specific user. We'll use a library called jsonwebtoken to generate this token, and then we'll use cookie-parser to set this token as a cookie.
\nInstall cookie-parser and jsonWebToken:
npm install cookie-parser jsonwebtoken\n\n
Use middleware to to authenticate tokens and attach them to req object passed to routes.
First, we generate JSON Web Tokens (JWTs) --- consequently, we need to require the jsonwebtoken module we just installed at the top of the auth.js controller. We will use it to generate a JWT after the new user document is saved.
\nUpdate TOP of auth.js with the require, and then edit the SIGN UP POST method as shown below. Remember the route goes AFTER you require all the middleware:
const jwt = require('jsonwebtoken');\n...\n// SIGN UP POST\napp.post('/sign-up', (req, res) => {\n // Create User and JWT\n const user = new User(req.body);\n\n user\n .save()\n .then((user) => {\n const token = jwt.sign({ _id: user._id }, process.env.SECRET, { expiresIn: '60 days' });\n return res.redirect('/');\n })\n .catch((err) => {\n console.log(err.message);\n return res.status(400).send({ err });\n });\n});\n...\n\n
Next we need to set the JWT as a cookie so that it will be included in all future requests from the current user's client.
\nNext we include cookieParser and jsonWebToken in the project by requiring them in the server.js file so that their methods can be used anywhere in the app.
...\nconst cookieParser = require('cookie-parser');\n...\nconst app = express();\n...\napp.use(cookieParser()); // Add this after you initialize express.\n...\n\n
Next we'll set the cookie. (We'll want our JWT cookie variable's name to bit unique so it doesn't get confusing with other sites, so we'll use the variable nToken.)
\nWe want to set the cookie when someone signs up and logs in. In the auth.js controller, update the post /sign-up route:
...\n user\n .save()\n .then(() => {\n const token = jwt.sign({ _id: user._id }, process.env.SECRET, { expiresIn: '60 days' });\n res.cookie('nToken', token, { maxAge: 900000, httpOnly: true });\n return res.redirect('/');\n });\n...\n
Now lets see if the cookie is set by examining the cookies in the client.
\nGo through the Sign Up flow on Reddit.js. Then open the Developer Tools, and view the cookies under Developer Tools > Application tab > Cookies, or by typing in document.cookies in the client console. Do you see the cookie?
Refactor all the code blocks above to be async/await.
\n$ git add .\n$ git commit -m 'Users can sign up'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA1Ng==","title":"Let's Logout","htmlContent":"Now that we have signed up, let's log out. Since \"being logged in\" just means that the cookie is set, we can create a new /logout route that just removes this cookie.
\nIt might be more accurate to use the DELETE method, because we are sort of deleting something, but we will just use the get method to simplify our requests at this point.
\n\nUpdate the auth.js controller to include a logout method. Remember to put it AFTER you require all the middleware:
// LOGOUT\n app.get('/logout', (req, res) => {\n res.clearCookie('nToken');\n return res.redirect('/');\n });\n\n
After you click the \"Logout\" link is the cookie still present in the server in req.cookies or in the client in Dev Tools > Application > Cookies?
$ git add .\n$ git commit -m 'Users can log out'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODA1OA==","title":"Let's Login","htmlContent":"Now that we've signed up, logged out, now let's login. We can use the same pattern as we did with the /sign-up routes, with one GET and one POST both with the path /login.
\nFirst let's build the GET route and template. You can copy and modify the sign up template to create login template. Remember to put it AFTER you require all the middleware:
\n// LOGIN FORM\n app.get('/login', (req, res) => res.render('login'));\n\n
Use the sign-up template code to make a new login view. It should be a very similar form to what you used for sign-up. Be sure to change the action field on the form!
The form should look like the following:\n\n \n
\nNow let's make the logic for the POST route to /login work. Remember to put it AFTER you require all the middleware:
// LOGIN\napp.post('/login', (req, res) => {\n const { username, password } = req.body;\n // Find this user name\n User.findOne({ username }, 'username password')\n .then((user) => {\n if (!user) {\n // User not found\n return res.status(401).send({ message: 'Wrong Username or Password' });\n }\n // Check the password\n user.comparePassword(password, (err, isMatch) => {\n if (!isMatch) {\n // Password does not match\n return res.status(401).send({ message: 'Wrong Username or password' });\n }\n // Create a token\n const token = jwt.sign({ _id: user._id, username: user.username }, process.env.SECRET, {\n expiresIn: '60 days',\n });\n // Set a cookie and redirect to root\n res.cookie('nToken', token, { maxAge: 900000, httpOnly: true });\n return res.redirect('/');\n });\n })\n .catch((err) => {\n console.log(err);\n });\n});\n\n
Refactor the code block above to be async/await.
\n$ git add .\n$ git commit -m 'Users can log in'\n$ git push\nPhew!
If we did everything right, now we should be able to sign up, log out, and login securely. This means that you have successfully implemented an authentication flow through JWTs that allows users to sign up, log in, and log out. Nice!
In the next chapter we'll associate our user record with our posts and comments.
"},{"id":"T0E6OlNlY3Rpb24tODA2MQ==","title":"Stretch Challenges: More Authentication Patterns","htmlContent":"\nThere is a lot more to make a full fledged authentication system. See which ones you want to try:
\n\nAdd a Remember Me checkbox. What is the difference from when it is checked or not?
Require a password confirmation field.
Plan out how you would do a \"forget password\" process.