Now, to get started interacting
with the database from inside our NodeJS project,
I created a simple starting project
so that we don't have to write
all the code from the ground up.
Specifically, I prepared some views and some styles,
though I will say that the views are basically empty.
We'll have to add more content to them together
throughout this section.
And the styles, of course, are only using CSS logic
we learned about throughout this course.
Now I'll walk you through these files
and folders in a second.
First of all, you can download
this prepared starting project
by using the file you find attached to this lecture.
And once you did so, you can extract it
and then move it somewhere on your system, on your machine,
maybe the same folder where you store all the other projects
you've worked on throughout this course.
And once you did all of that,
open the project in VS Code, as I did it here,
and then there, go to Terminal, New Terminal.
And in that terminal, this integrated terminal,
run npm install to install all the dependencies
this project needs.
The package.json file was part of the attachment.
And in there, I list all the dependencies we need
to get started like Express
and EJS for rendering the templates
and Nodemon for automatically restarting the server
during development whenever we change our code.
Then we can close this terminal
and now have a look at the files and folders I gave to you.
And let's maybe start with app.js.
In there, I got some imports to Express
and to build in path package.
And then I got an import to a blog.js file
in a routes folder, which doesn't exist yet.
We're going to add to this file together
throughout the section.
Next, I create my Express app,
and then I got some basic initialization work.
For example, here, I'm setting up the view engine
and I tell Express.js where to find my views,
that it's in the views folder.
And then I ensure that incoming request bodies are parsed
and data is extracted from them with help of line 13,
where I set up a built-in middleware
that will do that request body parsing.
And then here, I also do make sure
that static files are served.
And that these are concepts I covered in earlier sections,
for example, in the templates section.
So therefore, definitely have a look
at those course sections again,
if this is all brand new to you.
These are all concepts we learned about,
and therefore I'm not going to explain them
from the ground up again.
This line 14 basically makes sure that we can load CSS
and JavaScript files without issues, for example.
Then I'm using the blogRoutes, which I'm importing here.
Though, as I mentioned, this file doesn't exist yet,
so we're going to set up those routes together
in a couple of minutes.
I already used them here though,
so we don't have to do that later.
And then I have a default error handling middleware here,
which in the end ensures that this 500 template is served
whenever anything goes wrong.
And that's a concept we learned about
in an earlier course section already as well.
We learned about this error handling
in our Express application
where we can handle 404 or 500 errors.
And we did learn about this general error handling
middleware there as well.
So therefore that's the app.js file, not too fancy,
really just some basics we learned about before.
Let's now have a look at the other folders and files.
And there we have the public folder
with a nested styles folder inside of it.
And then that styles folder, we got some CSS files.
Now feel free to go through that CSS code on your own.
It's really just some basic code
using concepts we learned about throughout this course,
setting some colors, fonts, margins,
and doing the same for form,
elements like inputs and text areas,
and then also managing some lists of data and so on.
Really not too fancy and not too much.
The only interesting line is,
or the only interesting part
is this part at the bottom of posts.css
with this white-space: pre-wrap rule,
and I'll come back to that later.
You'll see it in action later.
This will be important for preserving line breaks
that we might enter into our blog post text.
And again, I'll come back to that later,
but other than that,
it's really just straightforward CSS code
using all the concepts you'll learn about
throughout this course.
Now in the views folder,
I prepared a couple of EJS files,
the error pages here, for example,
and then also a file for listing all the blog posts,
for showing the details about a blog post.
But you will notice that all the data is missing in there
because the views I'm providing to you here
really just are the frames that we'll use basically.
We're going to populate them with some concrete data
together throughout this course section.
So therefore, these templates at the moment
aren't doing too many useful things.
They're basically just empty.
I also got a couple of includes here for the head section,
for example, where I import some fonts from Google Fonts
and some global stylesheet is set up.
So one of my own stylesheets here, and then some header,
which we can include on the pages,
and then also a post item,
which we can later use on this posts-list.ejs file here.
But again, that's all mostly empty and not fully functional
because that's now what we will work on.
And what we'll do now in the next lectures
is we're going to define the routes
that we wanna have step-by-step.
We're going to connect to the database
from inside this Node Express app
so that this code here is able to talk to the database.
And then we are going to talk to the database
and we are going to create posts,
read posts, delete, and update posts,
and do all the things that were sketched out
earlier in this section.