# 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
