Welcome to the Daily Planet. We need your superhuman developer skills to help us share news with the world. We've seen that you have some Express knowledge and need you to make us a MVP website as soon as possible.
You'll need to hook your server up to a database to create, stoore and display articles.
##Getting Started
For your first Express deliverable, we'll be setting everything up from scratch. In the future, we'll start using a template, complete with linters and all!
To get going we need to set up a basic Express server (see today's notes for full details).
- Fork/clone this repository
- Run
npm init
in the directory - Install express, ejs, body-parser, express-ejs-layouts, pg, pg-hstore via npm
- Create an index.js file
- Setup a basic Express server with a root route
Use this for your basic root route just to make sure it is working.
app.get('/', function(req, res) {
res.send('HELLO TACO!!!');
});
At this point you should be able to run nodemon
and then go to http://localhost:3000
and see "HELLO TACO!!!".
- Create a views folder
- Create a file for your home page:
index.ejs
- Add HTML to the file created above
- Render the index page on your root route
- Don't forget to set up your EJS view engine
Change your root route to render your home page (index.ejs)
app.get('/', function(req, res) {
res.render('index.ejs');
});
STOP At this point we should be able to go to localhost:3000
and see an html page that is the result of the contents of what is in index.ejs
. If you'd like, feel free to use partials for parts of this page.
We'll store all the articles in Postgres. Use Sequilize to create a model
representing an article. Articles should have a title
property and a body
property.
Reference course notes on Sequilize
You'll need to create the following articles
routes. Notice: you won't need
to create routes to update or delete articles.
Here's the class notes on implementing basic CRUD in Express
GET /
- view:
views/index.ejs
- purpose: Serve the homepage of your site.
- view:
GET /articles
- view:
views/articles/index.ejs
- purpose: displays a list of all articles
- view:
GET /articles/new
- view:
views/articles/new.ejs
- purpose: displays a form that users use to create a new article
- view:
POST /articles
- view: none (redirects to /articles after the article is created)
- purpose: creates a new article (adds to articles array and saves the file)
GET /articles/:id
- view:
views/articles/show.ejs
- purpose: find an article by id in the array of
articles
and display it.
- view:
Create the following routes for static pages. You can use EJS with these pages, but you won't be passing any data.
GET /about
serve a static about daily planet page.GET /contact
serve a static contact page.
Your EJS views should be organized using folders. Here is an example.
Use the express-ejs-layouts
module so the main structure of your site
appears in only one file, the layout.ejs
file.
- express-daily-planet
- views
- layout.ejs
- articles
- index.ejs
- new.ejs
- show.ejs
- site
- home.ejs
- about.ejs
- contact.ejs
Style the page and include a navigation bar to help the user navigate the site.
Note that this is a news site, so style accordingly. Put the navbar in your
layout.ejs
file to it appears everywhere easily!
We're getting to the big leagues now, so we'll let you figure that out on your own. Express documentation is a useful resource.
- Create a search form (can be on home page or articles index)
- Accept
q
query string on your articles route/articles?q=search+term
- find how to access the query string from the request (Hint: the query isn't in
req.params
) - displays list of articles filtered by search term
- ensure the route still works without a query string (displays all articles)
- find how to access the query string from the request (Hint: the query isn't in
- There's no magic back-end solution to filtering! Use what you know about setting up routes, figure out how to access the query string and use regular JavaScript logic and array manipulation to build up an array of results.
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].