Lesson Overview

This short lesson discusses the basic file and directory structure of a typical Node.js project. You can generally have whatever structure you want, but there is a standard directory structure that is common in the industry: this structure makes it easy to modularize and organize the various files and functionality of your Node.js projects.

Pre-Requisites

It's helpful if you already understand what Node.js is and how it works.

Node.js Project Structure

If you understand how Node.js works and what kinds of things we do with it, it should make sense that when you upload a Node.js project to your server for deployment, you NEVER put your source files anywhere in the /public_html directory. Anything inside the /public_html is available to the public (hence the name). Anyone can view any of the files that are stored under /public_html.

You don't want Node.js projects in /public_html: this would not only allow anyone to see your code, but a typical Node.js source file would also have information about the names and locations of files and data stores, classes and objects that are part of your project, and other information that you wouldn't want someone else to have access to. Instead, projects should go inside a directory that's outside of /public_html, generally in a directory that's a sibling of /public_html (a directory that shares the same parent directory as /public_html). Only someone with administrator privileges on the server can access anything outside of /public_html.

But what about stuff like your HTML and CSS files? If those aren't public and can't be accessed, how do your application's users access them? Via routes. Your Node.js app will contain lots of code that accepts requests and then routes them to various functions that return the appropriate resources as a response. Those resources are part of your project's files and do not have to be public because your response body will contain the requested resource.

Node.js apps have a different directory structure than you're used to for web applications and web sites. Recall that many web sites have the following standard structure, and note that the project root is somewhere inside the /public_html directory on the server.

typical regular web site with sub directories for css and scripts — Typical Web Site Directory Structure

For Node.js applications, a project might typically have the following directory and file structure:

typical node.js web site — Node.js Project Directory Structure

app.js is your main Node.js file, the starting point of your app
package.json contains information about the project (this file is generated automatically when you run npm init)
package-lock.json used by NPM to keep track of your package installations and dependencies (locations, versions, etc)
/node_modules contains the files for any packages you installed
/public is where you would place any directories or static files that are considered "public": any static files that are ok to access by anyone, such as stylesheets, images, etc.
- static files are files that don't change as a result of server-side code (e.g. .css files always stay the same, you don't write server-side code to change them: someone would open the file in an editor to change it; this would also apply to .html files whose contents don't change as a result of server-side code)
- this directory usually follows the structure of a standard web site, containing sub-directories such as /images for images, /css for stylesheets, etc.
/routes contains all the .js files that perform routing tasks in your application
- e.g. you might have orders.js that contains all the code that routes requests for the part of the application that deals with orders and main.js to route all other requests
/views contains templates that are used to show HTML pages to a user with dynamic data (HTML files that are not static)
- for example, you might have an HTML template that has placeholders for a user's username and the items that are currently in their virtual shopping cart
- placeholders inside HTML templates are replaced with actual values (via server-side code) when the page is requested and that request is processed

Your first few Node.js projects won't have much of that structure up above, but as you learn more, and also start working with Express.js, you'll eventually have several projects structured just like the example.