# Express Basics
\
\
### What is Express.js?
: Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop `web` and `mobile` applications.
#### Core Features
1. Allows to **set up middlewares** to respond to HTTP Requests
2. Defines a **routing table** which is used to perform different actions based on HTTP Method and URL
3. Allows to **dynamically render HTML Pages** based on passing arguments to templates
\
## Installation
### 1. Installing Express Locally
> Install express
```bash
npm install express --save
```
* saves the installation locally in the **node\_modules**
* create a directory **express** inside **node\_modules**
> Express version check
```bash
$ npm view express version
4.17.1
```
> Install modules along with express
```bash
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
```
\
### 2. Installing Express in the Project
#### Directory structure
```
express_tutorial/
├── package.json
├── public
│ └── css
│ └── style.css
├── router
│ └── main.js
├── server.js
└── views
├── about.html
└── index.html
```
#### 1. create package.json
```json
{
"name": "express-tutorial",
"version": "1.0.0",
"dependencies":
{
"express": "~4.13.1",
"ejs": "~2.4.1"
}
}
```
\
#### 2. Install dependency by using `npm`
```bash
npm install
```
\
#### 3. Create `Express` server
> server.js
```javascript
var express = require('express');
var app = express()
var server = app.listen(8000, function(){
console.log("Express server running on port 8000!")
})
```
> result
```bash
$ node server.js
Express server running on port 8000!
```
* When opening the web server on port 8000, the text `Cannot GET/` is displayed
* why?
* Because the `Router` hasn't been set up yet!
\
#### 4. Basic Routing
> server.js
```javascript
var express = require('express');
var app = express()
var server = app.listen(8000, function(){
console.log("Express server running on port 8000!")
})
app.get('/', function(request, response){
response.send('Hello World')
})
```
\
#### 5. Router
It is good coding practice to write router code and server code in separate files!
* Create a **router** folder
* Create `main.js`
> router > main.js
```javascript
module.exports = function(app){
app.get('/', function(request, response){
response.render('index.html')
});
app.get('/about', function(request, response){
response.render('about.html')
});
}
```
* `module.exports` allows the **router** code to be imported and used as a module in `server.js` since it was written separately\~!
\
### 5. Render HTML page
* Create a **views** directory
* Create `html` files
> views > index.html
```html
Index
This is index page!
```
> views > about.html
```html
About
About... what?
```
> Modify server.js
```javascript
var express = require('express');
var app = express();
// Import the router module main.js and pass app to it
var router = require('./router/main')(app);
// Define the location of HTML so the server can read it
app.set('views',__dirname + '/views');
// Set the server to use the EJS engine when rendering HTML
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
var server = app.listen(8000, function(){
console.log("Express server has started on port 8000!!")
})
```
\
### Handling Static Files
#### Static Files
* `.js`, `css`, `image` files used in HTML
* To handle `Static files` on the **Server**, use the `express.static()` method!
1. Create a **public** directory
2. Create a **css** directory
3. Create `.css` files
> public > css > style.css
```css
body {
background-color: black;
color: white;
}
```
> Modify server.js
```javascript
// Set the public directory as the static folder
app.use(express.static('public'));
```
> Add CSS link to html files
```html
```
#### result
> 127.0.0.1:8000/
> 127.0.0.1:8000/about
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://chloe-codes1.gitbook.io/til/node.js/express.js/01_express_basics.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.