Optional starting repo: https://github.com/PrimeAcademy/node-express-starter
This starting repo starts with a directory structure set up. The
server.js
file is empty.
,________, .------, | .------, .------.
|________| ,'_____,'| | ,'_____,'| ( )
| | | | | | | ____ | | |~------~|
| | | | | | | ____ | | |~------~|
| | | | ; | | ____ | ; |~------~|
|________| |______|' | |______|' `.______.'
HTML/CSS JS | Node / Express Database
|
CLIENT | SERVER
Up to this point, we've been using our local computer to help serve files. But no one else could access them. The internet is possible because we tell a computer that it expects to get connections from other computers. The computers expecting connections are called Servers. In order to have your computer expect connections, we need code. Client code runs in the browser. Server code runs on the server (in the cloud).
When you go to www.google.com, you are connecting to a server.
That server is expecting you, and serves you back the static index.html.
It also can serve your static assets -- images, css, js, fonts, etc.
Today, we will be building your first static file server. WOAH!
NOTE: Project names (when running
npm init
) can not have capital letters or spaces.
Express is a Node.js web application framework. It simplifies the process for accepting requests and returning responses on the server. Express allows us to respond to URLs.
- Use this template to create a GitHub repo on your account
- Clone the repo on to your computer
- Create a
.gitignore
file and ignorenode_modules/
,.DS_Store
and*.log
.gitignore
node_modules/
.DS_Store
*.log
- In the project folder, run
npm init --yes
- Install express
npm install express
- If you made a mistake, that's ok, you can always
npm uninstall some-thing
NOTE: Some lecture notes and assignments will reference
body-parser
. This library is now included as a part ofexpress
.
Notice above we are using a program called npm
to install things called 'packages.'
npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.
NPM allows us to use code written by others or even to share our own Node project. Much like we use jQuery, which is code written by someone else to save time and effort. NPM is a registry (and a tool) to help manage and access a ton of pre-made code. In fact, we can install jQuery using npm
! Most popular packages can be installed via the npm
tool.
ctrl-c
server.js
// Require express - gives us a function
const express = require('express');
// Create an instance of express by calling the function returned above - gives us an object
const app = express();
const port = process.env.PORT || 5001;
// express static file serving - public is the folder name
app.use(express.static('server/public'));
// Start up our server
app.listen(port, () => {
console.log('listening on port', port);
});
At this point we could start our server using node server/server.js
. To simplify things we can add the following line to our package.json
file.
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server/server.js"
},
For this example, there are already files in the public
folder.
Folder structure:
salary-calculator-server/
├── server/
│ ├── public/
│ │ ├── scripts/
│ │ │ └── client.js
│ │ ├── styles/
│ │ │ └── style.css
│ │ └── index.html
│ └── server.js
├── node_modules/
│ ├── express/
│ └── ...
└── .gitignore
NOTE: The
node_modules
folder is auto generated.
You should be able to run your code by navigating to http://localhost:5001.