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