What exactly does 'serving static files' mean?

So far I've always been developing my clientside applications without any of my own servers running behind it, using Webstorm's built-in webserver to serve my content.

What I frequently see when people use Node with Express to act as their webserver is the debate on if you should put your html files with node or with the client code.

I understand javascript files that are included in html or css are best stored in the client directory?

So my first question is, with a folder structure like this

app/
  client/ js files
  server/ node files

Should you include your html pages in your server or your client directory?

Secondly:

Sometimes I see people use express.static for static files, what exactly is implied by static files here? Today most websites are not static documents anymore but are files that get altered by javascript by manipulating the DOM, so I don't think any html files should be considered as static files?

As far as I can see, the only advantage I have with using Node instead of the built-in webserver is if I want to have database access.

Solution 1:

Today most websites are not static documents anymore but are files that get altered by javascript by manipulating the DOM, so I don't think any html files should be considered as static files?

The files for your pages themselves are still static. That is, you are not creating them dynamically with server-side code. What happens in the browser doesn't matter in this context... the idea is that you do not need to generate these files on the fly, as their content does not change.

I understand javascript files that are included in html or css are best stored in the client directory?

Where you store your files on the server doesn't matter. What does matter is that you don't generally want to serve static files from your Node.js application. Tools like express.static are for convenience only. Sometimes, you may have a low traffic application. In these cases, it is perfectly acceptable to serve files with your Node.js app. For anything with a decent traffic load, it's best to leave static serving up to a real web server such as Nginx, since these servers are far more efficient than your Node.js application.

You should keep your application code (code that serves dynamic responses, such as an API server) within your Node.js application.

It's also a good idea to put your Node.js application behind a proxy like Nginx so that the proxy can handle all of the client interaction (such as spoon-feeding slow clients) leaving your Node.js application to do what it does best. Again though, in low traffic situations it doesn't matter.

Solution 2:

Sometimes I see people use express.static for static files, what exactly is implied by static files here?

I believe you're referring to this bit of code usually found an an express app's app.js file:

app.use(express.static(path.join(__dirname, 'public')));

express.static() is a bit of middleware that maps directory names to the path directory for easy lookup. Usually you'll have:

- public
  |_ javascripts
  |_ stylesheets
  |_ images

If you have a script in your javascripts directory, you dont have to type out the full path to include it. Just:

./javascripts/script.js

Static files are best considered as files that are not include by something like NPM or Bower. They are your own scripts, stylesheets, images, etc. It has nothing to do with the page being dynamic or static.

As to your first question:

Im personally not sure of the need for that kind of project architecture if you're using node. If you're using node and something like Ember.js or Angular for your clientside app, than I would personally put my actual application scripts inside of the public/javascripts/ directory. But thats just me.

At the end of the day, pick a project structure you like, and stick with it. If other people are working on the project however, stick with common conventions. It makes life easier.