@ -0,0 +1,612 @@
|
||||
# Express Basics
|
||||
|
||||
# JS HTTP server
|
||||
|
||||
# A simple HTTP server in Node
|
||||
|
||||
__A simple server in three steps:__
|
||||
|
||||
__include "http" library__
|
||||
|
||||
__create server responses__
|
||||
|
||||
__define the port that you want to listen to.__
|
||||
|
||||
__Note: The \_ before a variable name is used to indicate that the variable isn't used. This is to avoid the VSCode warning about unused variable__
|
||||
|
||||
import http from 'http'
|
||||
|
||||
const server = http.createServer((\_req, res) => {
|
||||
|
||||
res.write('Some cool response!')
|
||||
|
||||
res.end()
|
||||
|
||||
})
|
||||
|
||||
const port = 3000
|
||||
|
||||
server.listen(port)
|
||||
|
||||
console.log('HTTP Server listening port', port)
|
||||
|
||||
For this code to work, remember "type": "module" in your package.json. Also, you may need to change your port number to something other than 3000.
|
||||
|
||||
# PORT numbers
|
||||
|
||||
__The port number (16 bit unsigned integer) defines a port through which the communication to your application happens. Ports allow multiple applications to be located on the same host (IP).__
|
||||
|
||||
__The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate.__
|
||||
|
||||
__Computers have several different ports at their disposal __ _but_ __ some of them are being used and your application might not be able to assign those ports to itself.__
|
||||
|
||||
__Ports from 0 to 1023 are the system ports. There are restrictions in manually assigning applications to use them.__
|
||||
|
||||
__Generally speaking, ports from 1024 to 65535 are available for user to assign applications to use them.__
|
||||
|
||||

|
||||
|
||||
# Request and response
|
||||
|
||||
__The request object is an object that is sent__ __ from the client to the server.__
|
||||
|
||||
__The response object is an object that is sent__ __ from the server to the client__ __. When you modify the response object, you're essentially modifying how the server responds to the client.__
|
||||
|
||||
_const_ server = http.createServer(( _req_ , _res_ ) _=>_ {
|
||||
|
||||
res.write("Some cool response!");
|
||||
|
||||
res.end();
|
||||
|
||||
});
|
||||
|
||||
# Exercise 1: Simple Request & Response
|
||||
|
||||
Create a basic HTTP-server application. The application should respond to GET requests by returning a response with the following content: "Hello world!".
|
||||
|
||||
Test your application either with _Postman,_ or by navigating your browser to http://localhost:< _your\_portnumber_ >
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Express Server
|
||||
|
||||
# Express
|
||||
|
||||
__Express is the most popular server-library for Node__
|
||||
|
||||
__Setting up a server with node-http is already fairly simple, but Express tries to make this even simpler__
|
||||
|
||||
__In some cases you can manage without Express, but for larger applications it's recommended__
|
||||
|
||||
__Install Express by using__
|
||||
|
||||
__npm install express__
|
||||
|
||||
# A side note about dependencies
|
||||
|
||||
* __By using __ __npm install <package>__ __, the package will become dependency for the application.__
|
||||
* __By using __ __npm install --save-dev <package>__ __, the package will become __ __development dependency__ __ for the application.__
|
||||
* __This means the package won't be included in the built application.__
|
||||
* __A shortcut for __ __--__ __save-dev__ __ is __ __-D__
|
||||
* __Dependencies are needed to run the application, dev-dependencies are needed for development.__
|
||||
* __Additional info: __ [https://www.geeksforgeeks.org/difference-between-dependencies-devdependencies-and-peerdependencies/](https://www.geeksforgeeks.org/difference-between-dependencies-devdependencies-and-peerdependencies/)
|
||||
|
||||
# Getting started with Express
|
||||
|
||||
__Create a very simple express project __
|
||||
|
||||
import express from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.listen(3000, () => {
|
||||
|
||||
console.log('Listening to port 3000')
|
||||
|
||||
})
|
||||
|
||||
__Then start the server and connect to __ [http://localhost:3000](http://localhost:3000) __ with your browser.__ __ (See instructions on the next slide)_
|
||||
|
||||
# Starting the server
|
||||
|
||||
__To make using the import statement possible, we need to edit the __ __package.json.__
|
||||
|
||||
__Add a new script "start" with the value "node index.js" under "scripts" object in the package. json__
|
||||
|
||||
__(you can name index.js to whatever file your server code is in)_
|
||||
|
||||
__Add "type": "module" property__
|
||||
|
||||
__Now you can run the server with __ _npm start_
|
||||
|
||||
# Express - Requests
|
||||
|
||||
__The server does not yet __ _do_ __ anything except listens. That is because we have not defined how it should deal with incoming __ _requests._
|
||||
|
||||
__With Express you can easily process different kind of requests, e.g.,__
|
||||
|
||||
__server.get(), server.post(), server.delete() etc!__
|
||||
|
||||
__An example of a simple GET response below.__
|
||||
|
||||
server.get("/", (request, response) => {
|
||||
|
||||
response.send("Just saying hello!")
|
||||
|
||||
})
|
||||
|
||||
---
|
||||
|
||||
Käy läpi tämä esimerkki, ja anna sitten tehtäväksi ensinnäkin muuttaa portti ja palautusviesti muotoon "Hello world!". Tällä tavalla kaikkien pitää ymmärtää miten tämä toimii.
|
||||
Anna heidän pähkäillä miten voi tehdä päätepisteen, johon pääsee näin localhost:5000/secondPage. Tämän jälkeen käy läpi yhdessä tämä heidän kanssa.
|
||||
|
||||
# Express - Endpoints
|
||||
|
||||
__To create a new __ _endpoint _ __we define what __ _kind_ __ of request we're handling, then what the __ _route_ __ to the endpoint is and finally what the endpoint __ _does_ __.__
|
||||
|
||||
__In the below example we are creating an endpoint that handles a __ __GET__ __ request to route __ __/foobar__ __, that sends a response containing the string 'OK'.__
|
||||
|
||||
server.get('/foobar', (req, res) => {
|
||||
|
||||
res.send('OK')
|
||||
|
||||
})
|
||||
|
||||
---
|
||||
|
||||
# Nodemon
|
||||
|
||||
__Reminder__ __: If you are not using Nodemon in development, you are making your life unnecessarily difficult. Use Nodemon. __
|
||||
|
||||
__Instructions are __ __below as a refresher.__
|
||||
|
||||
# Nodemon with JavaScript
|
||||
|
||||
One of the handiest packages out there is nodemon, which monitors your node program. Whenever you save your files, it reloads the program, showing you immediately the results of your changes.
|
||||
|
||||
Nodemon is installed as a dev dependency __npm install --save-dev nodemon__
|
||||
|
||||
To use nodemon, you should have a development script "dev": "nodemon ./index.js"
|
||||
|
||||
# Nodemon with TypeScript
|
||||
|
||||
To get Nodemon working with TypeScript we need additional package to run our TS code without waiting for it to compile. __npm install --save-dev nodemon ts-node__
|
||||
|
||||
After installing, nodemon works directly with .ts files. "dev": "nodemon ./index.ts"
|
||||
|
||||
# Exercise 2: Simple Express Server
|
||||
|
||||
Create a basic Express application. The application should respond to GET requests by returns a response with the following content: "Hello world!".
|
||||
|
||||
Extra: Add a new endpoint to your application. So, in addition to accessing _http://localhost:3000_ , try to send something back from _http://localhost:3000/endpoint2_ .
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Request params & query
|
||||
|
||||
__If request params are defined, they're something user __ __must__ __ send to the server.__
|
||||
|
||||
__https://localhost:5000/ThisIsParam__
|
||||
|
||||
__Request query is __ __optional__ __ information that the user can send to the server.__
|
||||
|
||||
__https://localhost:5000?ThisIsQuery=123__
|
||||
|
||||
__Chaining query parameters:__
|
||||
|
||||
__https://localhost:5000?first=123&second=456__
|
||||
|
||||
# Request params & request query
|
||||
|
||||
app.get("/:name/:surname", ( _request_ , _response_ ) _=>_ {
|
||||
|
||||
_console_ .log("Params:");
|
||||
|
||||
_console_ .log(request.params);
|
||||
|
||||
_console_ .log("Query:");
|
||||
|
||||
_console_ .log(request.query);
|
||||
|
||||
response.send("Hello " + request.params.name);
|
||||
|
||||
});
|
||||
|
||||
app.listen(5000);
|
||||
|
||||
Try connecting via browser!
|
||||
|
||||
_localhost:5000_ _/John/Doe_
|
||||
|
||||
_localhost:5000_ _/John/Doe_ _?query1=123_
|
||||
|
||||
---
|
||||
|
||||
Johdatteleva esimerkki vielä ennen seuraavaa tehtävää.
|
||||
|
||||
# Request query & param types
|
||||
|
||||
__Request parameters and query parameters are always of type __ _string_ __. If a number is passed, it will be a string that contains a number. __
|
||||
|
||||
__The example on right will __ __always __ __return 404, since the strict equality __ item.id === id
|
||||
|
||||
__will never be true. This is because the__ __ item.id __ __is of type __ _number _ __and__ __ id __ __being of type __ _string_ __.__
|
||||
|
||||
import express from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
const data = [
|
||||
|
||||
{ id: 1, name: 'John' },
|
||||
|
||||
{ id: 2, name: 'Jane' }
|
||||
|
||||
]
|
||||
|
||||
server.get('/:id', (req, res) => {
|
||||
|
||||
const id = req.params.id
|
||||
|
||||
const info = data.find(item => item.id === id)
|
||||
|
||||
if (info === undefined) {
|
||||
|
||||
return res.status(404).send()
|
||||
|
||||
}
|
||||
|
||||
res.send(info)
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000)
|
||||
|
||||
# Exercise 3: Counter Server
|
||||
|
||||
Create an API that consists of only one endpoint:
|
||||
|
||||
/counter
|
||||
|
||||
Whenever you enter this endpoint from the browser, it
|
||||
|
||||
should respond with a JSON object with information on how many times the endpoint has been accessed.
|
||||
|
||||
Extra: Make it possible to set the counter to whichever
|
||||
|
||||
integer with a query parameter /counter?number=5
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Exercise 4: Advanced Counter Server
|
||||
|
||||
Expand the API from the previous assignment by accepting a name through the counter endpoint: /counter/:name
|
||||
|
||||
When entering this endpoint, the server should return the count of how many times this named endpoint has been visited.
|
||||
|
||||
For example
|
||||
|
||||
Aaron enters /counter/Aaron 🠖 "Aaron was here 1 times"
|
||||
|
||||
Aaron enters /counter/Aaron 🠖 "Aaron was here 2 times"
|
||||
|
||||
Beatrice enters /counter/Beatrice 🠖 "Beatrice was here 1 times"
|
||||
|
||||
Aaron enters /counter/Aaron 🠖 "Aaron was here 3 times"
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# "url" library
|
||||
|
||||
__With the "url" library, you can parse url fields (i.e., requests) the client sends to your server.__
|
||||
|
||||
_import_ url from 'url';
|
||||
|
||||
// URL module usage example
|
||||
|
||||
_const_ adr = ' [http://localhost:5000/default.html?year=2017&month=february](http://localhost:5000/default.html?year=2017&month=february) '; // Define the address
|
||||
|
||||
_const_ q = url.parse(adr, true); // Parse through the address with url.parse() function.
|
||||
|
||||
_console_ .log(q.host); // returns 'localhost:5000'
|
||||
|
||||
_console_ .log(q.pathname); // returns '/default.html'
|
||||
|
||||
_console_ .log(q.search); // returns '?year=2017&month=february'
|
||||
|
||||
_const_ qdata = q.query; // returns an object: { year: 2017, month: 'february' }
|
||||
|
||||
_console_ .log(qdata.month); // returns 'february
|
||||
|
||||
# Express Middleware
|
||||
|
||||
# Middlewares
|
||||
|
||||
__Generally speaking, middleware is an application that does something in between some other applications. __
|
||||
|
||||
__There are tons of middleware libraries available for Express.__
|
||||
|
||||
__What this means in Express: with a middleware, you can manipulate the __ __the client request and server response __ __in the client-server communication.__
|
||||
|
||||
__Middleware__ __ functions are functions that have access to the __ __request__ __ object (__ _req_ __), the __ __response__ __ object (__ _res_ __), and the __ _next_ __ function in the application's request-response cycle. When the __ _next_ __ function is invoked, the next middleware function is executed.__
|
||||
|
||||
__Middleware can be defined as such__
|
||||
|
||||
const authCheck = (req, res, next) => {
|
||||
|
||||
if (req.headers.Authentication === undefined) { // Read the request object
|
||||
|
||||
res.status(401).send('Missing Authentication Header') // Modify the response object
|
||||
|
||||
} else {
|
||||
|
||||
next() // Execute the next middleware
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
__In Express, .use() method initializes a middleware (argument 2) in a given path (argument 1).__
|
||||
|
||||
__In the middleware, the next() function will jump to the next middleware or endpoint.__
|
||||
|
||||
server.use('/customers', authCheck)
|
||||
|
||||
server.get('/customers', (req, res) => {
|
||||
|
||||
// we know that Authentication header is present
|
||||
|
||||
...
|
||||
|
||||
})
|
||||
|
||||
# Exercise 5: Logger Middleware
|
||||
|
||||
Create a new project called Student Registry. We will be developing this program in stages during this lecture. For now it should have a single GET endpoint /students that returns an empty list.
|
||||
|
||||
Create a logger middleware function that is used in all the project's endpoints. The middleware should log
|
||||
|
||||
the time the request was made
|
||||
|
||||
the method of the request
|
||||
|
||||
the url of the endpoint
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Middleware - Unknown endpoint (AKA 404)
|
||||
|
||||
As you might have noticed, all websites have some kind of a default functionality for unknown endpoints.
|
||||
|
||||
This can be handled with a middleware.
|
||||
|
||||
Unknown endpoint has to be taken into use after the actual endpoints!
|
||||
|
||||

|
||||
|
||||
# Middleware - Error handler
|
||||
|
||||
An error handler is often needed to handle different kind of user or application errors.
|
||||
|
||||
We can use middleware to enable error handling for our application.
|
||||
|
||||
Has to be the last middleware to be taken into use!
|
||||
|
||||

|
||||
|
||||
# Middleware - Req & Res
|
||||
|
||||
__A n__ __eed to manually alter req & res is quite common. To avoid bloated code, the handling can be easily done with proper middlewares.__
|
||||
|
||||
__Setting a header in middleware:__
|
||||
|
||||
app.use((req, res, next) => {
|
||||
|
||||
res.setHeader('Content-Type', 'image/png')
|
||||
|
||||
next();
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
__Getting a header and storing its value. If the header is not present, return 403 with an 'Unauthorized' message:__
|
||||
|
||||
app.use((req, res, next) => {
|
||||
|
||||
const someIdNeededInApplication = req.header('Some-Custom-Header')
|
||||
|
||||
if (!someIdNeededInApplication) {
|
||||
|
||||
res.status(403).send('Unauthorized')
|
||||
|
||||
}
|
||||
|
||||
someIdFunctionality(someIdNeededInApplication)
|
||||
|
||||
next()
|
||||
|
||||
})
|
||||
|
||||
# Exercise 6: 404 Not Found
|
||||
|
||||
Add a middleware function that sends a response with status code 404 and an appropriate error message, if user tries to use an endpoint that does not exist.
|
||||
|
||||
If you have not already done so, move all your middleware to a separate file, to keep your program clean and readable.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Express.js: Creating a REST API
|
||||
|
||||
# REST HTTP requests
|
||||
|
||||
__We have gone through what a GET request is. Let's briefly go through what other types of requests are necessary for you.__
|
||||
|
||||
__GET /products/:id → Returns a single product identified by its id__
|
||||
|
||||
__GET /products →Returns all the products__
|
||||
|
||||
__POST /products → Creates a new product__
|
||||
|
||||
__DELETE /products/:id → Removes a single product identified by its id__
|
||||
|
||||
__PUT /products/:id → Updates an existing product__
|
||||
|
||||
Basic RESTFUL functionality is often referenced as a CRUD (Create, Read, Update, Delete).
|
||||
|
||||
# Handling request content
|
||||
|
||||
__To properly handle some requests, e.g., POST requests, in Express, a body-parser middleware must be taken into use. It's as simple as:__
|
||||
|
||||
const server = express()
|
||||
|
||||
server.use(express.json())
|
||||
|
||||
You might encounter a separate body-parser being used. This is no longer necessary, as Express 4.16+ includes a body parser middleware built-in.
|
||||
|
||||
express.urlencoded() __allows us to parse url-encoded forms by attaching the data to the request body.__
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
|
||||
app.use(express.urlencoded({extended: false}))
|
||||
|
||||
__The "extended" parameter's false value only says that we are not dealing with any complicated objects (objects with sub objects, etc)_
|
||||
|
||||
# Basic POST request
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
|
||||
app.use(express.urlencoded({extended: false}))
|
||||
|
||||
app.get("/", (req, res) => {
|
||||
|
||||
console.log("GET request init!");
|
||||
|
||||
res.sendFile(\_\_dirname + "/index.html");
|
||||
|
||||
})
|
||||
|
||||
app.post("/", (req, res) => {
|
||||
|
||||
console.log("POST request init!");
|
||||
|
||||
console.log(req.body);
|
||||
|
||||
res.redirect("/");
|
||||
|
||||
})
|
||||
|
||||
# Request Body
|
||||
|
||||
__GET__ __ methods should not in general have body parameters. The GET method should only be used to get data, the request should not convey data. __
|
||||
|
||||
__Despite this, most modern implementations can send and receive request bodies in all request types.__
|
||||
|
||||
__The requests that should not include body are __ __CONNECT__ __, __ __GET__ __, __ __HEAD__ __, __ __OPTIONS__ __, and __ __TRACE__ __. __
|
||||
|
||||
# Request Body Types
|
||||
|
||||
__Request body is parsed by the express body parser, and therefore it can contain any basic JavaScript data types. Notice that this differs from the request parameters and queries.__
|
||||
|
||||
__This also means that you do not know what the data type of any given body parameter will be. It might be necessary to check this in some cases.__
|
||||
|
||||
# TypeScript Body Casting
|
||||
|
||||
__If you want to enforce type safety, the solution is to validate the user input before using it.__
|
||||
|
||||
__This is usually a good idea even if not using TypeScript, since it is important to know what type all the variables are in your code.__
|
||||
|
||||
import express, { NextFunction, Request, Response} from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.use(express.json())
|
||||
|
||||
interface Body {
|
||||
|
||||
name: string
|
||||
|
||||
age: number
|
||||
|
||||
}
|
||||
|
||||
const validate = (req: Request, res: Response, next: NextFunction ) => {
|
||||
|
||||
const { age, name } = req.body
|
||||
|
||||
if (typeof(age) !== 'number' || typeof(name) !== 'string') {
|
||||
|
||||
return res.status(400).send('Missing or invalid parameters')
|
||||
|
||||
}
|
||||
|
||||
next()
|
||||
|
||||
}
|
||||
|
||||
server.post('/', validate, (req: Request, res: Response) => {
|
||||
|
||||
const body: Body = req.body
|
||||
|
||||
console.log(body)
|
||||
|
||||
res.send(body.name.toUpperCase())
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000)
|
||||
|
||||
# Exercise 7: Body Logging
|
||||
|
||||
Enable body parsing in your application.
|
||||
|
||||
Modify your logger middleware so that in addition to existing functionality, it also logs the request body if it exists.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Exercise 8: POST Requests
|
||||
|
||||
Add two more endpoints to your app:
|
||||
|
||||
POST /student should expect the request body to include student _id_ , _name _ and _email_ . If some of these parameters are missing, the endpoint should return a response with status code 400 and an error message. The endpoint should store the student information in an array called _students_ . The endpoint should return an empty response with status code 201.
|
||||
|
||||
GET /student/:id should return the information of a single student, identified by the _id_ request parameter. The response should be in JSON format. If there is no such student, the endpoint should return 404.
|
||||
|
||||
Modify the GET /students endpoint to return the list of all student _ids_ , without names or emails.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Exercise 9: PUT and DELETE
|
||||
|
||||
Add two more endpoints to your app:
|
||||
|
||||
PUT /student/:id should expect the request body to include student _name_ or _email_ . If both are missing, the endpoint should return a response with status code 400 and an error message. The endpoint should update an existing student identified by the request parameter _id_ .
|
||||
|
||||
DELETE /student/:id should remove a student identified by the request parameter _id_ .
|
||||
|
||||
Both endpoints should return 404 if there is no student matching the request parameter _id_ . On success both endpoint should return an empty response with status code 204.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
@ -0,0 +1,704 @@
|
||||
# Express Router, Authentication & Testing
|
||||
|
||||
# Static Content
|
||||
|
||||
We can make a web application out of our REST-API. First you need to create a folder at the root of your application, and name it for example "public". When you add an index.html file there, with the example below it will served when you send a GET request to our server.
|
||||
|
||||
import express from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.use(express.static('public'))
|
||||
|
||||
server.get('/route', (req, res) => {
|
||||
|
||||
res.send('OK')
|
||||
|
||||
})
|
||||
|
||||
server.listen(PORT, () => console.log('Listening to port', PORT))
|
||||
|
||||
# Exercise 1: Static
|
||||
|
||||
Let's continue improving the Students API we created in the last lecture.
|
||||
|
||||
Add a static info page to your API.
|
||||
|
||||
The page should be reachable from the root path / and it should include some information about all the endpoints in the API.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Router
|
||||
|
||||
# Express Router
|
||||
|
||||
Until now we have been building our routes to index.js. This is fine for VERY small applications, but we'd like to keep our code readable even if our application grows in size.
|
||||
|
||||
__Routers__ are Express classes that are dedicated to route handling. We can use them to group routes to meaningful units that share functionality.
|
||||
|
||||
Routers do not require any installation since they are native express classes.
|
||||
|
||||
The following application, while still being extremely simple, already has a problem: index.js file is doing several things.
|
||||
|
||||
It handles two kinds of routes and starts the server. Usually it also adds middleware and some configuration.
|
||||
|
||||
Most of the time it is best to separate the route handling to dedicated routers.
|
||||
|
||||
import express from 'express'
|
||||
|
||||
import authors from './approvedAuthors.js'
|
||||
|
||||
import articles from './articlesDao.js'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.get('/authors', (req, res) => {
|
||||
|
||||
res.send(authors)
|
||||
|
||||
})
|
||||
|
||||
server.get('/authors/:id', (req, res) => {
|
||||
|
||||
const author = authors.find(author => author.id = req.params.id)
|
||||
|
||||
res.send(author)
|
||||
|
||||
})
|
||||
|
||||
server.get('/articles', (req, res) => {
|
||||
|
||||
res.send(articles.getAll())
|
||||
|
||||
})
|
||||
|
||||
server.post('/article', (req, res) => {
|
||||
|
||||
const { author, article } = req.body
|
||||
|
||||
const newArticle = articles.add({ author, article})
|
||||
|
||||
res.send(newArticle)
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000, () => console.log('Listening to port 3000'))
|
||||
|
||||
We create two routers, one for each logical unit: _authorsRouter.js_ and _articlesRouter.js_
|
||||
|
||||
The only difference in the route definition is in the route paths.
|
||||
|
||||
import express from 'express'
|
||||
|
||||
import authors from './approvedAuthors.js'
|
||||
|
||||
const router = express.Router()
|
||||
|
||||
router.get('/', (req, res) => {
|
||||
|
||||
res.send(authors)
|
||||
|
||||
})
|
||||
|
||||
router.get('/:id', (req, res) => {
|
||||
|
||||
const author = authors.find(author => author.id = req.params.id)
|
||||
|
||||
res.send(author)
|
||||
|
||||
})
|
||||
|
||||
export default server
|
||||
|
||||
import express from 'express'
|
||||
|
||||
import articles from './articlesDao.js'
|
||||
|
||||
const router = express.Router()
|
||||
|
||||
router.get('/', (req, res) => {
|
||||
|
||||
res.send(articles.getAll())
|
||||
|
||||
})
|
||||
|
||||
router.post('/', (req, res) => {
|
||||
|
||||
const { author, article } = req.body
|
||||
|
||||
const newArticle = articles.add({ author, article})
|
||||
|
||||
res.send(newArticle)
|
||||
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
Then we define _index.js_ to use those routers like any middleware.
|
||||
|
||||
Each route gets a path designation that will be used as _prefix_ in the router.
|
||||
|
||||
import express from 'express'
|
||||
|
||||
import authorsRouter from './authorsRouter.js'
|
||||
|
||||
import articlesRouter from './articlesRouter.js'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.use('/authors', authorsRouter)
|
||||
|
||||
server.use('/articles', articlesRouter)
|
||||
|
||||
server.listen(3000, () => {
|
||||
|
||||
console.log('Listening to port 3000')
|
||||
|
||||
})
|
||||
|
||||
# Exercise 2: Students Router
|
||||
|
||||
Let's continue improving the Students API we created on the last lecture.
|
||||
|
||||
Add a _studentRouter.js_ file that exports a router with all the five routes the app currently has.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Authentication & authorization
|
||||
|
||||
# Token based login
|
||||
|
||||
* Currently our applications are accessible for anyone, which often is not a desired state of things.
|
||||
* If you don't restrict access to your endpoints, something like [this](https://mastodon.gamedev.place/@badlogic/111246798083590676) [might happen](https://firesky.tv/) !!!
|
||||
* Authentication & Authorization help here
|
||||
* Authentication: Verifying that you are indeed you
|
||||
* Authorization: Determining access rights based on your privileges
|
||||
* We shall first look at password authorization, and later token-based authentication.
|
||||
|
||||
# Storing passwords
|
||||
|
||||
# Password Hashing
|
||||
|
||||
Passwords should never be stored as plain text in to a database. Instead a password _hash_ should be stored instead.
|
||||
|
||||
_Hash function_ maps data of any size (in our case a password) to a _hash _ of fixed length.
|
||||
|
||||
Hash functions are _one-way functions_ , which means they can not be reversed. This means that you can not deduce the original password from the hash.
|
||||
|
||||
We can use (a variant of) the original hash function to compare a password and the hash and deduce if the hash _matches_ the password or not.
|
||||
|
||||
# Salting
|
||||
|
||||
Bare hash functions produce identical results from identical inputs.
|
||||
|
||||
To add complexity, a some random data is added to the input. This data is called _salt_ and the process of adding the salt is called _salting_ .
|
||||
|
||||
This means two identical passwords produce different hashes, since both have unique salt.
|
||||
|
||||
Salt can be stored in the hash or it can be stored separately. The hash function needs to know the salt in order to verify passwords against the hash.
|
||||
|
||||
# Hashing a password
|
||||
|
||||
We will use Argon library to do our hashing and comparing. Install Argon with __npm install argon2__
|
||||
|
||||
Using Argon to hash passwords is very straightforward. Salting is done automatically (although you can configure it in more detail if you wish to do so) and the salt is added to the hash.
|
||||
|
||||
import argon2 from 'argon2'
|
||||
|
||||
const password = process.argv[2]
|
||||
|
||||
argon2.hash(password)
|
||||
|
||||
.then(result => console.log(result))
|
||||
|
||||
You can of course also use _async/await_ syntax instead of _.then()
|
||||
|
||||
# Comparing hashes
|
||||
|
||||
Notice if you run the example from the previous slide multiple times, you always get a different result. In order to verify that a particular password matches the hash, Argon's _verify_ function is used.
|
||||
|
||||
Verify returns a promise that resolves to either _true,_ if the password matches the hash, or _false_ if it doesn't.
|
||||
|
||||
import argon2 from 'argon2'
|
||||
|
||||
const hash = '$argon2id$v=19$m=4096,t=3,p=1$+OM8yk1Kd3M/709t0Hy1vg$E3aii3UmOQOp6jFJVd9xDpakMOF1O6TDd1gS1i/98HE'
|
||||
|
||||
const password = process.argv[2]
|
||||
|
||||
argon2.verify(hash, password)
|
||||
|
||||
.then(passwordMatchesHash => console.log(passwordMatchesHash ? 'Correct' : 'Incorrect'))
|
||||
|
||||
# Exercise 3: Registration
|
||||
|
||||
Create and attach a new router, _userRouter.js_ that has a single endpoint: POST /register .
|
||||
|
||||
The endpoint should
|
||||
|
||||
expect a request body with two parameters, _username _ and _password_ .
|
||||
|
||||
create a hash from the password using the Argon2 library.
|
||||
|
||||
store the username and the hash in an in-memory storage (e.g. let users = [ ... ]) and log the result to the console.
|
||||
|
||||
return a response with status code 201 (Created) on success
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Exercise 4: Login
|
||||
|
||||
Add another endpoint to the user router: POST /login that also expects two request body parameters, _username _ and _password_ .
|
||||
|
||||
The endpoint should
|
||||
|
||||
check that the user exists in the in-memory storage.
|
||||
|
||||
If the user exists, it should use the Argon2 library to verify that the given password matches the stored hash.
|
||||
|
||||
If they match, it should return a response with status code 204 (No Content).
|
||||
|
||||
If the user does not exist, or the password doesn't match the hash, it should return a response with status code 401 (Unauthorized).
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Environment variables
|
||||
|
||||
# dotenv Library
|
||||
|
||||
With dotenv library, we can create environment variables that can be loaded into process.env. We can access the environment variables in our application with process.env.{variable\_name}.
|
||||
|
||||
To use dotenv
|
||||
|
||||
Install dotenv package with __npm install dotenv__
|
||||
|
||||
Create a __.env __ file in to the root folder of your application where the values are declared
|
||||
|
||||
Import the dotenv configuration in the projectimport 'dotenv/config'
|
||||
|
||||
Access the variables defined in __.env__ fileconst PORT = process.env.PORT
|
||||
|
||||
# .env File
|
||||
|
||||
The custom environment variables are declared in the .env file. The file must be located in the folder from where the program is ran. This is usually the root folder.
|
||||
|
||||
The variables are declared as in the example below, separated by line changes. All values are _strings _ (even if JS parses some automatically).
|
||||
|
||||
Notice there are no spaces around the equals (=) sign, nor any kind of quotation marks.
|
||||
|
||||
API\_URL=https://cataas.com
|
||||
|
||||
PORT=3000
|
||||
|
||||
# dotenv in Development
|
||||
|
||||
* In many cases the environment variables are configured on the platform from where the program is ran. In those cases you might want to run dotenv only in development mode.
|
||||
* Install as dev dependency __npm install --save-dev dotenv__
|
||||
* Create __.env__ file as usual.
|
||||
* Optionally include ENVIRONMENT=development variable
|
||||
* Run your application from config.json script that preloads dotenv"dev": "nodemon -r dotenv/config index.js"
|
||||
* Access environment variables as usualconst PORT = process.env.PORT
|
||||
|
||||
# Exercise 5: Environmental Login
|
||||
|
||||
Add an admin login to the Students API. We want to store admin credentials in environment variables.
|
||||
|
||||
Add dotenv library as dependency.
|
||||
|
||||
Add a .env file that defines an admin username and an admin password hash.
|
||||
|
||||
Add an endpoint POST /admin that also expects two request body parameters, _username _ and _password_ . The endpoint should
|
||||
|
||||
check that the username matches the one defined in the .env file
|
||||
|
||||
check that the password matches the hash defined in the .env file
|
||||
|
||||
if they match, it should return a response with status code204 (No Content)
|
||||
|
||||
if they do not match, it should return a response with status code 401 (Unauthorized)
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Token-based authentication
|
||||
|
||||
# JSON Web Token
|
||||
|
||||
After verifying the identity of our user, we create a _token_ that we send to the client. The client stores that token and attaches it to all future requests. This token is enough to identify the request as authorized.
|
||||
|
||||
Since the tokens are signed by us, we can also include data (such as user id) in the token. On all future requests we can rely that the id is correct since the JWT will be verified on every request.
|
||||
|
||||
Tokens can (and should be) equipped with expiration dates.
|
||||
|
||||
# Creating a Token
|
||||
|
||||
Install the JSON Web Token package as dependency npm install jsonwebtoken
|
||||
|
||||
Tokens are created with the _sign_ function that takes two parameters: _Payload:_ the data we want to include in the token. It can be empty. _Secret_ : either a string or a private key.
|
||||
|
||||
It can also accept an optional _options_ parameter. In that we can define the expiration date, compression algorithm, or many other things.
|
||||
|
||||
import 'dotenv/config'
|
||||
|
||||
import jwt from 'jsonwebtoken'
|
||||
|
||||
const payload = { username: 'sugarplumfairy' }
|
||||
|
||||
const secret = process.env.SECRET
|
||||
|
||||
const options = { expiresIn: '1h'}
|
||||
|
||||
const token = jwt.sign(payload, secret, options)
|
||||
|
||||
console.log(token)
|
||||
|
||||
The created JWT has three parts separated by period: header, payload and signature.
|
||||
|
||||
# Exercise 6: Create a Token
|
||||
|
||||
Write a simple command line program that prints JSON Web tokens. Use the default algorithm (SHA256). Set the tokens to expire in fifteen minutes and include a payload of some JSON object.
|
||||
|
||||
Copy your JWT and paste it to [https://jwt.io](https://jwt.io) debugger. Verify that the debugger shows correct algorithm, data, and expiration date (iat).
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Verifying a Token
|
||||
|
||||
Tokens are verified using the _verify_ function that takes two parameters:
|
||||
|
||||
_Token_ : the token to be verified
|
||||
|
||||
_Secret_ : the secret that was used to create the token
|
||||
|
||||
The verify function can also accept an optional _options_ parameter.
|
||||
|
||||
The verify function returns a _decoded_ token. Since it has been verified against our secret, we know that the information has not been altered.
|
||||
|
||||
If the token is invalid, the verify function _throws an error_ . If this error is not caught, the program crashes.
|
||||
|
||||
# Exercise 7: Verify a Token
|
||||
|
||||
Write a simple command line program that verifies JSON Web tokens.
|
||||
|
||||
The program should print the contents of the verified token. If the token is not valid, the program should print an error message and exit gracefully.
|
||||
|
||||
Create a JWT in [https://jwt.io](https://jwt.io) debugger. Remember to set your secret value. Use your program to verify the token and see that the data entered is as it should be.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Bearer Tokens
|
||||
|
||||
When a user has received a token, it can be used to authenticate all future requests.
|
||||
|
||||
Do this by adding the field _Authorization _ to the request header.
|
||||
|
||||
The value is "Bearer " plus the token.
|
||||
|
||||
This header can be added to requests generated by Fetch, Axios, or any other JS request library, or by API clients like Postman or Insomnia.
|
||||
|
||||
Then protected routes can check that the authorization header is valid, and if not, send an error message. This is usually done using authorization middleware.
|
||||
|
||||
# Authentication Middleware
|
||||
|
||||
A common way is to have user routes, such as login, logout or user creation in a separate router, which requires no token.
|
||||
|
||||
Then all protected routes are set to use the authentication middleware.
|
||||
|
||||
The request parameter _user_ is set to the verified token data and can then be used in the actual route.
|
||||
|
||||
const authenticate = (req, res, next) => {
|
||||
|
||||
const auth = req.get('Authorization')
|
||||
|
||||
if (!auth?.startsWith('Bearer ')) {
|
||||
|
||||
return res.status(401).send('Invalid token')
|
||||
|
||||
}
|
||||
|
||||
const token = auth.substring(7)
|
||||
|
||||
const secret = process.env.SECRET
|
||||
|
||||
try {
|
||||
|
||||
const decodedToken = jwt.verify(token, secret)
|
||||
|
||||
req.user = decodedToken
|
||||
|
||||
next()
|
||||
|
||||
} catch (error) {
|
||||
|
||||
return res.status(401).send('Invalid token')
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
router.get('/protected', authenticate, (req, res) => {
|
||||
|
||||
res.send(\`${req.user.username} accessed protected route\`)
|
||||
|
||||
})
|
||||
|
||||
# TypeScript: Extending Request
|
||||
|
||||
Let's look at the following example, written in JavaScript. There is a middleware that adds a _username _ property to the request object. Then the endpoint reads the username property and uses it to construct a response.
|
||||
|
||||
What happens when we write the same code in TypeScript?
|
||||
|
||||
import express from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
const middleware = (req, \_res, next) => {
|
||||
|
||||
req.username = 'sugarplumfairy'
|
||||
|
||||
next()
|
||||
|
||||
}
|
||||
|
||||
server.use(middleware)
|
||||
|
||||
server.get('/', (req, res) => {
|
||||
|
||||
res.send(\`Welcome, ${req.username}!\`)
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000)
|
||||
|
||||
Property 'username' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'
|
||||
|
||||
import express, { Request, Response, NextFunction } from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
const middleware = (req: Request, res: Response, next: NextFunction) => {
|
||||
|
||||
req.username = 'sugarplumfairy'
|
||||
|
||||
next()
|
||||
|
||||
}
|
||||
|
||||
server.use(middleware)
|
||||
|
||||
server.get('/', (req, res) => {
|
||||
|
||||
res.send(\`Welcome, ${req.username}!\`)
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000)
|
||||
|
||||
Property 'username' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'
|
||||
|
||||
We are trying to set a value to request property "username", but request objects are well defined objects that have no such property.
|
||||
|
||||
We can not add or use properties that an object does not have. This is part of the type safety that TypeScript is here to enforce. If an object is of type Request, we know exactly what the properties are.
|
||||
|
||||
The solution is to create an interface that extends the existing Request type. The new interface will have all the properties the Request has, plus the ones we define ourself.
|
||||
|
||||
interface CustomRequest extends Request {
|
||||
|
||||
username?: string
|
||||
|
||||
}
|
||||
|
||||
Since the interface extends Request, CustomRequest objects can be used anywhere where Request object is required.
|
||||
|
||||
Notice that the additional properties must be optional, signified by the question mark in the name. Otherwise existing Request objects can not be cast as CustomRequest objects.
|
||||
|
||||
This example has only a single string, but the extended object can be as complex as needed.
|
||||
|
||||
interface CustomRequest extends Request {
|
||||
|
||||
username?: string
|
||||
|
||||
}
|
||||
|
||||
Now we can use the "username" property when we declare that we are using CustomRequest instead of basic Request object.
|
||||
|
||||
import express, { Request, Response, NextFunction} from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
interface CustomRequest extends Request {
|
||||
|
||||
username?: string
|
||||
|
||||
}
|
||||
|
||||
const middleware = (req: CustomRequest, res: Response, next: NextFunction) => {
|
||||
|
||||
req.username = 'sugarplumfairy'
|
||||
|
||||
next()
|
||||
|
||||
}
|
||||
|
||||
server.use(middleware)
|
||||
|
||||
server.get('/', (req: CustomRequest, res: Response) => {
|
||||
|
||||
res.send(\`Welcome, ${req.username}!\`)
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000)
|
||||
|
||||
# Exercise 8: Securing a Route
|
||||
|
||||
Modify the Students API /register and /login routes so that on success they return a response with status code 200 and a JWT with username as payload.
|
||||
|
||||
Secure all the routes in the _students _ router so that they require the user to be logged in to use the routes.
|
||||
|
||||
Extra: Also modify the /admin route to return a JWT. Secure the POST, PUT and DELETE routes to require that in addition to being logged in, the user also needs to be an admin.
|
||||
|
||||
Hint: Here you have some resources on sending a token with Postman.
|
||||
|
||||
[https://learning.postman.com/docs/sending-requests/authorization/](https://learning.postman.com/docs/sending-requests/authorization/)
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
||||
# Supertest
|
||||
|
||||
# Testing APIs with Supertest
|
||||
|
||||
Supertest is a library for testing API's. Let's see how to use it with Jest to test an Express app. Install supertest with
|
||||
|
||||
npm install --save-dev supertest
|
||||
|
||||
When using ESLint, also add "jest": true to .eslintrc's "env" object
|
||||
|
||||
_index.js_
|
||||
|
||||
import express from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.get('/', (req, res) => {
|
||||
|
||||
res.send('Hello World!')
|
||||
|
||||
})
|
||||
|
||||
server.listen(3000, () => {
|
||||
|
||||
console.log('Listening to port 3000')
|
||||
|
||||
})
|
||||
|
||||
When using TypeScript, also install the required types from @types/supertest and @types/jest
|
||||
|
||||
Also, install the ts-jest package, and add to package.json:
|
||||
|
||||
"jest": {
|
||||
|
||||
"preset": "ts-jest",
|
||||
|
||||
"testEnvironment": "node"
|
||||
|
||||
},
|
||||
|
||||
We need to import our express application to the tests.
|
||||
|
||||
We will separate our application in two files. The _server.js_ defines the API server, and _index.js_ only starts the application.
|
||||
|
||||
Now we can test the server with Supertest. The startup file has no functionality we want to test.
|
||||
|
||||
_index.js_
|
||||
|
||||
import server from './server.js'
|
||||
|
||||
server.listen(3000, () => {
|
||||
|
||||
console.log('Listening to port 3000')
|
||||
|
||||
})
|
||||
|
||||
_server.js_
|
||||
|
||||
import express from 'express'
|
||||
|
||||
const server = express()
|
||||
|
||||
server.get('/', (req, res) => {
|
||||
|
||||
res.send('Hello World!')
|
||||
|
||||
})
|
||||
|
||||
export default server
|
||||
|
||||
We now create a new test file and import our server there.
|
||||
|
||||
We use Supertest _request_ to get responses from our server. These responses can be tested just like any other Jest test.
|
||||
|
||||
_test/server.test.js_
|
||||
|
||||
import request from 'supertest'
|
||||
|
||||
import server from '../src/server.js'
|
||||
|
||||
describe('Server', () => {
|
||||
|
||||
it('Returns 404 on invalid address', async () => {
|
||||
|
||||
const response = await request(server)
|
||||
|
||||
.get('/invalidaddress')
|
||||
|
||||
expect(response.statusCode).toBe(404)
|
||||
|
||||
})
|
||||
|
||||
it('Returns 200 on valid address', async () => {
|
||||
|
||||
const response = await request(server)
|
||||
|
||||
.get('/')
|
||||
|
||||
expect(response.statusCode).toBe(200)
|
||||
|
||||
expect(response.text).toEqual('Hello World!')
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
# Common Resources
|
||||
|
||||
[https://www.npmjs.com/package/jest](https://www.npmjs.com/package/jest) → Official repository
|
||||
|
||||
[https://www.npmjs.com/package/supertest](https://www.npmjs.com/package/supertest) → Official repository
|
||||
|
||||
[https://jestjs.io/docs/api](https://jestjs.io/docs/api) → Jest API Docs. Very handy!
|
||||
|
||||
[https://github.com/visionmedia/supertest](https://github.com/visionmedia/supertest) → Supertest's github repository. Includes guides for basic use cases.
|
||||
|
||||
# Exercise 9: Test with Supertest
|
||||
|
||||
Use Supertest with Jest to create tests for the Students API /user/register and /user/login routes.
|
||||
|
||||
---
|
||||
|
||||
Solution: https://gitlab.com/bctjs/week3-day2/-/blob/master/examples/day2/countdown.js
|
||||
|
@ -1,85 +0,0 @@
|
||||
---
|
||||
marp: true
|
||||
paginate: true
|
||||
math: mathjax
|
||||
theme: buutti
|
||||
title: N. Example Lecture
|
||||
---
|
||||
|
||||
# Example Lecture
|
||||
|
||||
<!-- headingDivider: 5 -->
|
||||
<!-- class: invert -->
|
||||
|
||||
## Section
|
||||
|
||||
- This line appears instantly
|
||||
* This line appears by pressing spacebar (preferred)
|
||||
* This line has an inline code `variable`
|
||||
1. This line appears instantly
|
||||
2) This line appears by pressing spacebar
|
||||
|
||||
## Code and maths
|
||||
|
||||
* code code code:
|
||||
```js
|
||||
console.log("Here's a syntax-highlighted JavaScript code block");
|
||||
console.log("Remember indentation so it's revealed after the bullet point.");
|
||||
```
|
||||
* This line has an inline LaTeX maths equation $c = \frac{a^2}{\sqrt{b}}$
|
||||
* Here's a maths block:
|
||||
|
||||
$$
|
||||
F(x) = \int_a^b f(x) dx
|
||||
$$
|
||||
|
||||
<!-- _footer: Footers are exclusive to presentation; they are not shown in the webpage markdown document -->
|
||||
|
||||
## Columns
|
||||
|
||||
<div class='columns' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||

|
||||
|
||||
* Basic image example
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||

|
||||
* Wider image
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
* This line is outside the columns and goes from left all the way to the right
|
||||
|
||||
## Columns 2
|
||||
|
||||
<div class='columns21' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* Another column example with a wider left panel
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
* Change `class` name to change proportions
|
||||
* If suitable proportions not available, add to `buutti.css`
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Setup
|
||||
|
||||
* In VS Code, install the extensions
|
||||
* [Marp for VS code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
||||
* So you can see the slideshow preview when editing.
|
||||
* [Markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
* [Markdown table formatter](https://marketplace.visualstudio.com/items?itemName=fcrespo82.markdown-table-formatter)
|
||||
* *Right click > Format document* makes tables pretty
|
||||
* [Save and run](https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run)
|
||||
* An HTML version of the lecture is created on save
|
||||
* See [settings.json](./.vscode/settings.json)
|
||||
* Add filenames to `notMatch` if a HTML on save is not needed
|
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 145 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 77 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 9.6 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 211 KiB |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 83 KiB |
After Width: | Height: | Size: 124 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 125 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 47 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 1.5 KiB |