How-to : express JS
Yik Teng Hie
5 years ago
commit
30d9237a7a
@ -0,0 +1,19 @@
|
|||||||
|
# How To
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
* [VS Code](https://code.visualstudio.com/)
|
||||||
|
* [IntelliJ IDEA Community](https://www.jetbrains.com/idea/download/#section=windows)
|
||||||
|
|
||||||
|
* [nodeJS 12.x](https://nodejs.org/en/download/releases/)
|
||||||
|
* [JDK 8](https://adoptopenjdk.net/) - For Spring Boot only
|
||||||
|
* [Postman](https://www.postman.com/)
|
||||||
|
|
||||||
|
## Framework
|
||||||
|
|
||||||
|
* Backend
|
||||||
|
* [expressJS](./backend/expressJS/README.md)
|
||||||
|
* springboot
|
||||||
|
* Frontend
|
||||||
|
* [reactJS](./frontend/reactJS/README.md)
|
||||||
|
* vueJS
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
# Express JS
|
||||||
|
|
||||||
|
[Home](../../README.md)
|
||||||
|
|
||||||
|
[Reference](https://expressjs.com/en/starter)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Create a project skeleton
|
||||||
|
|
||||||
|
Option1 : Using basic `npm` step
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ mkdir myapp
|
||||||
|
$ cd myapp
|
||||||
|
|
||||||
|
$ npm init
|
||||||
|
|
||||||
|
$ npm install express --save
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Option2 : Using `npx` express application generator.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ mkdir myapp
|
||||||
|
$ cd myappnpm
|
||||||
|
$ npx express-generator
|
||||||
|
$ npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Launch `vscode` IDE
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ code .
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Validate the `./bin/www.js`. By default, server serve at port 3000
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
var port = normalizePort(process.env.PORT || '3000');
|
||||||
|
app.set('port', port);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Add new route in `app.js` for *helloworld* routing
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var helloworldRouter = require('./routes/helloworld');
|
||||||
|
//...
|
||||||
|
app.use('/', indexRouter);
|
||||||
|
app.use('/users', usersRouter);
|
||||||
|
// new routing to helloworld
|
||||||
|
app.use('/helloworld', helloworldRouter);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Create new routing for `helloworld.js`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var express = require('express');
|
||||||
|
var router = express.Router();
|
||||||
|
|
||||||
|
// GET method
|
||||||
|
router.get('/', function (req, res) {
|
||||||
|
res.send('Hello World!')
|
||||||
|
})
|
||||||
|
|
||||||
|
// POST method
|
||||||
|
router.post('/', function (req, res) {
|
||||||
|
res.send('Got a POST request')
|
||||||
|
})
|
||||||
|
|
||||||
|
// PUT method
|
||||||
|
router.put('/user', function (req, res) {
|
||||||
|
res.send('Got a PUT request at helloworld/user')
|
||||||
|
})
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Run the server
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ npm start
|
||||||
|
...
|
||||||
|
> expressjs@0.0.0 start C:\dev\playground\expressJS
|
||||||
|
> node ./bin/www
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Browse [localhost](http://localhost:3000). You should see the text in browser
|
||||||
|
|
||||||
|
```text
|
||||||
|
Express
|
||||||
|
Welcome to Express
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Use *Postman* to execute 'POST', 'PUT' methods
|
||||||
|
|
||||||
|
[json](./postman_collection.json)
|
||||||
|
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
{
|
||||||
|
"info": {
|
||||||
|
"_postman_id": "3d0d7bdd-fd8f-4697-8f82-1b046a77464a",
|
||||||
|
"name": "expressJS",
|
||||||
|
"description": "sample expressJS endpoint",
|
||||||
|
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
|
||||||
|
},
|
||||||
|
"item": [
|
||||||
|
{
|
||||||
|
"name": "POST helloworld",
|
||||||
|
"request": {
|
||||||
|
"method": "POST",
|
||||||
|
"header": [
|
||||||
|
{
|
||||||
|
"key": "Authorization",
|
||||||
|
"value": "SENSETIMESTUDIO authorization token. Start from BASIC",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body": {
|
||||||
|
"mode": "formdata",
|
||||||
|
"formdata": [
|
||||||
|
{
|
||||||
|
"key": "firstContext",
|
||||||
|
"value": "\"{\\\"type\\\":\\\"image\\\",\\\"metadata\\\":{\\\"access\\\":\\\"base64\\\",\\\"info\\\":{\\\"data\\\":\\\"YOUR BASE64 IMAGE\\\"}}}\"",
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "secondContext",
|
||||||
|
"value": "\"{\\\"type\\\":\\\"image\\\",\\\"metadata\\\":{\\\"access\\\":\\\"base64\\\",\\\"info\\\":{\\\"data\\\":\\\"YOUR BASE64 IMAGE\\\"}}}\"",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"raw": "http://localhost:3000/helloworld",
|
||||||
|
"protocol": "http",
|
||||||
|
"host": [
|
||||||
|
"localhost"
|
||||||
|
],
|
||||||
|
"port": "3000",
|
||||||
|
"path": [
|
||||||
|
"helloworld"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"response": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "GET helloworld",
|
||||||
|
"protocolProfileBehavior": {
|
||||||
|
"disableBodyPruning": true
|
||||||
|
},
|
||||||
|
"request": {
|
||||||
|
"method": "GET",
|
||||||
|
"header": [
|
||||||
|
{
|
||||||
|
"key": "Authorization",
|
||||||
|
"value": "SENSETIMESTUDIO authorization token. Start from BASIC",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body": {
|
||||||
|
"mode": "formdata",
|
||||||
|
"formdata": [
|
||||||
|
{
|
||||||
|
"key": "firstContext",
|
||||||
|
"value": "\"{\\\"type\\\":\\\"image\\\",\\\"metadata\\\":{\\\"access\\\":\\\"base64\\\",\\\"info\\\":{\\\"data\\\":\\\"YOUR BASE64 IMAGE\\\"}}}\"",
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "secondContext",
|
||||||
|
"value": "\"{\\\"type\\\":\\\"image\\\",\\\"metadata\\\":{\\\"access\\\":\\\"base64\\\",\\\"info\\\":{\\\"data\\\":\\\"YOUR BASE64 IMAGE\\\"}}}\"",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"raw": "http://localhost:3000/helloworld",
|
||||||
|
"protocol": "http",
|
||||||
|
"host": [
|
||||||
|
"localhost"
|
||||||
|
],
|
||||||
|
"port": "3000",
|
||||||
|
"path": [
|
||||||
|
"helloworld"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"response": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "PUT helloworld",
|
||||||
|
"request": {
|
||||||
|
"method": "PUT",
|
||||||
|
"header": [
|
||||||
|
{
|
||||||
|
"key": "Authorization",
|
||||||
|
"value": "SENSETIMESTUDIO authorization token. Start from BASIC",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body": {
|
||||||
|
"mode": "formdata",
|
||||||
|
"formdata": [
|
||||||
|
{
|
||||||
|
"key": "firstContext",
|
||||||
|
"value": "\"{\\\"type\\\":\\\"image\\\",\\\"metadata\\\":{\\\"access\\\":\\\"base64\\\",\\\"info\\\":{\\\"data\\\":\\\"YOUR BASE64 IMAGE\\\"}}}\"",
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "secondContext",
|
||||||
|
"value": "\"{\\\"type\\\":\\\"image\\\",\\\"metadata\\\":{\\\"access\\\":\\\"base64\\\",\\\"info\\\":{\\\"data\\\":\\\"YOUR BASE64 IMAGE\\\"}}}\"",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"raw": "http://localjost:3000/helloworld/user",
|
||||||
|
"protocol": "http",
|
||||||
|
"host": [
|
||||||
|
"localjost"
|
||||||
|
],
|
||||||
|
"port": "3000",
|
||||||
|
"path": [
|
||||||
|
"helloworld",
|
||||||
|
"user"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"response": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# React JS
|
||||||
|
|
||||||
|
Bootstrapping a project
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm install
|
||||||
|
|
||||||
|
npx create-react-app <projectname>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
Loading…
Reference in New Issue