,________, .------, | .------, .------.
|________| ,'_____,'| | ,'_____,'| ( )
| | | | | | | ____ | | |~------~|
| | | | | | | ____ | | |~------~|
| | | | ; | | ____ | ; |~------~|
|________| |______|' | |______|' `.______.'
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.
- Create a new repository on GitHub with a project name (initialize with a README.md)
- Clone the repo on to your computer
- Create a
.gitignore
file and ignorenode_modules/
,.DS_Store
and*.log
.gitignore
node_modules/
.DS_Store
*.log
- Get our folders and files in place
- Allow for incoming requests to be accepted
- Respond with our assets
- Create your 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.
- In the project folder, run
npm init --yes
- Install express
npm install express
- Install body-parser (for anything with a post)
npm install body-parser
- Don't forget to add
app.use(bodyParser.urlencoded({extended: true});
- Don't forget to add
- If you made a mistake, that's ok, you can always
npm uninstall some-thing
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. NPM is a registry (and a tool) to help manage and access a ton of pre-made code. 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 = 5000;
// 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);
});
app.listen(port, () => {
console.log('listening on port', port);
});
This is a funny looking line of code. Notice we're using the .listen
method. Its being given two things -- one is the PORT
we want to listen on, the second is... a function!
That function is called a callback function. Callbacks are a very common pattern in javascript. Basically, we say: When you start the server, please also run this function too. That way, when the server starts, we can run our own code!
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, use your weekend assignment. Bring in the HTML, CSS, and JavaScript files to use for testing.
You should be able to run your code by navigating to http://localhost:5000.