Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
React firebase 2
  • Overview
  • Transcript

1.4 Server Setup

I'm here on the terminal, because we're going to start building our wiki from the server. So, we'll begin by creating a directory for our project. I'm going to call it wicker because that's what I'm naming this project. Let's move into that project. And we'll start by running NPM INIT. NPM INIT is what we can use to create a package.json file for our project. This allows us to define some of the different traits of our project, primarily what our dependencies are. So, NPM INIT will give us a few questions that we have to work through. We'll just go with the default name and version number. For description, I'll just add a live collaborative wiki. Our entry point will be server.js. We won't have a test commander repository. Just, you can hit enter for the rest of those. All right. Now ,that we've created our package.json file, we can start installing our packages. We'll start with Express, of course, because this is the server that we're going to need. Now, when installing an NPM package, we can get a specific version of the package by doing package name. At sign version number. And so, I'm going to install expression version four. This way, if you're watching this video sometime in the future. You can still get the right versions of the packages that we're using. So, you can be sure everything's going to work. Now, we're going to include the --save flag so that this package will be saved into our package.json file. The next package we need to install is ejs which is our templating library. And we'll install version 02. Next, we want to include the skeleton CSS framework. This is just a really simple CSS framework, that will give us some super basic styling and a little bit of a grid system. We can get this by doing bower install skeleton. All right, with those packages in place we can get started on our server dodge ass file. So, I'm going to go ahead and open a new file called server.js. And the first thing we'll do in this file is pull in the Express library. Then, we can create our express application by calling Express. Now, off of our express application object, we'll begin by setting a value. We're going to set the view engine equal to EJS. This way, Express will know to use the EJS package that we installed. Next, we'll use express.static to serve all of the files in our public directory as static files. And finally, we will have our get which is just a catch all route. Of course, it takes a callback function with a request and a response. And then, inside of this, we just want to render our index template. So, we'll call response.render and will pass at the index template. Now, we don't need to pass a file extension or location, because we're going to use the views directory, which is the default views location. And of course, it will have the E.J.S file extension. Now, of course, the reason we're using a template is so that we can embed some values inside this template. So, those values will be passed as an object which is the second parameter to the render function. We only need one value and that is which will be our user object when a user signs in. However, for right now, we'll just set that to be no. The last step is to set our server listening on port 3000. And so, we'll add that at the end. All right. So, the next step is to create our views directory, and inside this views directory, let's open an index.ejs file. This is going to be your basic HTML template. We'll just do your standard simple starting points. We'll have a doc type, an HTML tag, a head tag, a body tag. Let's include a title. We'll also have some links to our CSS. Because I have a .bowerrc file that installs items to my public slash lib folder, our skeleton dependency was installed into public slash lib. So, that means from inside our view here we reference this with slash lib Slash skeleton, and then within the CSS directory is the skeleton dot CSS file. Now, I'm going to add our own custom stylesheet as well. And this is just going to be at /style.css. Now, we have to add some tags inside our body as well. We'll start with our do. Which will be the container for our whole application. The class container is used by skeleton. And we will use the ID app to access this day of from our javascript. Next. Let's add our user value that we're going to interpolate from our server.js file. We'll have basic script tag here, an inline script, and we'll just create a single global variable user, and we'll just interpolate that user value right there. Finally, we're going to include the script. All.js in this file. Now this all.js file is going to be the final compiled version of the code that we write in these lessons. We're going to use Browserify to compile it all into a single file. Well, that's all that we need in this template for now. So, in the next lesson, we'll look at setting up Browserify so that it will do that compiling for us.

Back to the top