consolidate notes
parent
e7384c7538
commit
363897a095
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@ -1,158 +1,57 @@
|
|||||||
# Prepare Full Stack App
|
# Frontend - Backend
|
||||||
|
|
||||||
## Pre Requisite
|
## Server Client Project
|
||||||
* Install React : `sudo npm -g install create-react-app`
|
|
||||||
* Install Express : `sudo npm install -g express-generator`
|
### Prerequisite
|
||||||
* Install CORS : `sudo npm install -g save cors`
|
|
||||||
|
* Run cmd in administrator mode
|
||||||
## Procedure
|
* npm - node package manager
|
||||||
1. Create Project Folder. Eg. fullstackapp
|
* Install `React` for frontend
|
||||||
2. Navigate to the folder
|
```
|
||||||
3. Create / prepare Backend project
|
$ npm install -g create-react-app
|
||||||
```
|
```
|
||||||
$ express --view=pug backend
|
* Install `express` for backend
|
||||||
$ cd backend
|
```
|
||||||
$ npm install
|
$ npm install -g express-generator
|
||||||
```
|
```
|
||||||
4. Create Frontend
|
* Install `cors` ??for backend
|
||||||
```
|
```
|
||||||
$ npx create-react-app frontend
|
$ npm install -g save cors
|
||||||
```
|
```
|
||||||
|
|
||||||
## Check Backend function
|
|
||||||
1. Navigate to backend folder
|
## Prepare Client (Frontend)
|
||||||
2. Start the server
|
|
||||||
```
|
* run npx (node package execute) from command line
|
||||||
$ npm start
|
```
|
||||||
```
|
$ npx create-react-app frontend
|
||||||
3. Use browser to navigate [http://localhost:3000](http://localhost:3000)
|
```
|
||||||
4. The page should display "Express", "Welcome to express"
|
* navigate to `frontend` folder. start
|
||||||
5. Press ctrl+c to stop the backend
|
```
|
||||||
|
$ cd frontend
|
||||||
|
$ npm start
|
||||||
## Check the frontend function
|
```
|
||||||
1. Navigate to frontend folder
|
|
||||||
2. Start the server
|
## Prepare Server (Backend)
|
||||||
```
|
|
||||||
$ npm start
|
* run from command line
|
||||||
```
|
```
|
||||||
3. Open browser and navigate to [http://localhost:3001](http://localhost:3001)
|
$ express --view=pug backend
|
||||||
4. The page should display "React welcome page with react logo"
|
$ cd backend
|
||||||
5. Press `ctrl+c` to stop the frontend
|
|
||||||
|
// optional : something global install not working
|
||||||
|
$ npm install cors
|
||||||
## Editing Backend in VScode
|
|
||||||
1. Launch VCcode from project folder `fullstack`
|
// install dependencies defined in package.json
|
||||||
2. Navigate to backend
|
$ npm install
|
||||||
3. Open the file `/bin/www`
|
```
|
||||||
4. Change server port to 7000
|
* navigate to `backend` folder. start
|
||||||
```
|
```
|
||||||
var port = normalizePort(process.env.PORT || '3000');
|
$ cd backend
|
||||||
app.set('port', port);
|
$ npm start
|
||||||
```
|
```
|
||||||
5. Goto `routes` folder
|
|
||||||
6. Create a new file called `mypage.js`
|
### Example
|
||||||
```
|
|
||||||
var express = require('express'); // import
|
1. [NUSMoney](nusmoney.md) frontend
|
||||||
var router = express.Router();
|
2. [Fullstack](fullstack.md) process
|
||||||
|
|
||||||
var mystr = "I am sending this DATA from backend to Frontend";
|
|
||||||
|
|
||||||
/* GET my page */
|
|
||||||
router.get('/', function(req, res, next) {
|
|
||||||
res.send(mystr);
|
|
||||||
});
|
|
||||||
|
|
||||||
module.exports = router;
|
|
||||||
```
|
|
||||||
7. Open app.js and `add this line`
|
|
||||||
```
|
|
||||||
var createError = require('http-errors');
|
|
||||||
var express = require('express');
|
|
||||||
var path = require('path');
|
|
||||||
var cookieParser = require('cookie-parser');
|
|
||||||
var logger = require('morgan');
|
|
||||||
var cors = require("cors"); // add this line
|
|
||||||
|
|
||||||
var indexRouter = require('./routes/index');
|
|
||||||
var usersRouter = require('./routes/users');
|
|
||||||
var mypageRouter = require('./routes/mypage'); // add this line
|
|
||||||
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// view engine setup
|
|
||||||
app.set('views', path.join(__dirname, 'views'));
|
|
||||||
app.set('view engine', 'pug');
|
|
||||||
|
|
||||||
app.use(logger('dev'));
|
|
||||||
app.use(express.json());
|
|
||||||
app.use(express.urlencoded({ extended: false }));
|
|
||||||
app.use(cookieParser());
|
|
||||||
app.use(express.static(path.join(__dirname, 'public')));
|
|
||||||
|
|
||||||
app.use(cors()); // add this line
|
|
||||||
app.use('/', indexRouter);
|
|
||||||
app.use('/users', usersRouter);
|
|
||||||
app.use('/mypage', mypageRouter); // add this line
|
|
||||||
|
|
||||||
// catch 404 and forward to error handler
|
|
||||||
app.use(function(req, res, next) {
|
|
||||||
next(createError(404));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
8. Install cors locally. Navigate to `backend` folder
|
|
||||||
```
|
|
||||||
$ sudo npm install cors
|
|
||||||
```
|
|
||||||
9. Open browser and navigate to [http://localhost:7000/mypage](http://localhost:7000/mypage). You should see
|
|
||||||
```
|
|
||||||
I am sending this DATA from backend to Frontend
|
|
||||||
```
|
|
||||||
|
|
||||||
## Editing Frontend in VSCode
|
|
||||||
1. Navigate to frontend
|
|
||||||
2. Open `/src/App.js`. Delete everything and copy the following
|
|
||||||
```
|
|
||||||
import React from 'react';
|
|
||||||
import logo from './logo.svg';
|
|
||||||
import './App.css';
|
|
||||||
|
|
||||||
class App extends React.Component {
|
|
||||||
constructor(props){
|
|
||||||
super(props);
|
|
||||||
this.state = { serverResponse: "" };
|
|
||||||
}
|
|
||||||
|
|
||||||
callAPIServer() {
|
|
||||||
fetch("http://localhost:7000/mypage")
|
|
||||||
.then(res => res.text())
|
|
||||||
.then(res => this.setState({ serverResponse: res }))
|
|
||||||
.catch(err => err);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() { // react lifecycle method componentDidMount()
|
|
||||||
// will execute the callAPIServer() methods afteer the component mounts
|
|
||||||
this.callAPIServer();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<header className="App-header">
|
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
|
||||||
<h1 className="App-title">Welcome to FintechSG React Course</h1>
|
|
||||||
<h2 className="App-intro">{this.state.serverResponse}</h2>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
```
|
|
||||||
9. Open browser and navigate to [http://localhost:3000](http://localhost:3000). You should see
|
|
||||||
```
|
|
||||||
Welcome to FintechSG React Course
|
|
||||||
|
|
||||||
I am sending this DATA from backend to Frontend
|
|
||||||
```
|
|
||||||
|
|||||||
@ -0,0 +1,158 @@
|
|||||||
|
# Prepare Full Stack App
|
||||||
|
|
||||||
|
## Pre Requisite
|
||||||
|
* Install React : `sudo npm -g install create-react-app`
|
||||||
|
* Install Express : `sudo npm install -g express-generator`
|
||||||
|
* Install CORS : `sudo npm install -g save cors`
|
||||||
|
|
||||||
|
## Procedure
|
||||||
|
1. Create Project Folder. Eg. fullstackapp
|
||||||
|
2. Navigate to the folder
|
||||||
|
3. Create / prepare Backend project
|
||||||
|
```
|
||||||
|
$ express --view=pug backend
|
||||||
|
$ cd backend
|
||||||
|
$ npm install
|
||||||
|
```
|
||||||
|
4. Create Frontend
|
||||||
|
```
|
||||||
|
$ npx create-react-app frontend
|
||||||
|
```
|
||||||
|
|
||||||
|
## Check Backend function
|
||||||
|
1. Navigate to backend folder
|
||||||
|
2. Start the server
|
||||||
|
```
|
||||||
|
$ npm start
|
||||||
|
```
|
||||||
|
3. Use browser to navigate [http://localhost:3000](http://localhost:3000)
|
||||||
|
4. The page should display "Express", "Welcome to express"
|
||||||
|
5. Press ctrl+c to stop the backend
|
||||||
|
|
||||||
|
|
||||||
|
## Check the frontend function
|
||||||
|
1. Navigate to frontend folder
|
||||||
|
2. Start the server
|
||||||
|
```
|
||||||
|
$ npm start
|
||||||
|
```
|
||||||
|
3. Open browser and navigate to [http://localhost:3001](http://localhost:3001)
|
||||||
|
4. The page should display "React welcome page with react logo"
|
||||||
|
5. Press `ctrl+c` to stop the frontend
|
||||||
|
|
||||||
|
|
||||||
|
## Editing Backend in VScode
|
||||||
|
1. Launch VCcode from project folder `fullstack`
|
||||||
|
2. Navigate to backend
|
||||||
|
3. Open the file `/bin/www`
|
||||||
|
4. Change server port to 7000
|
||||||
|
```
|
||||||
|
var port = normalizePort(process.env.PORT || '3000');
|
||||||
|
app.set('port', port);
|
||||||
|
```
|
||||||
|
5. Goto `routes` folder
|
||||||
|
6. Create a new file called `mypage.js`
|
||||||
|
```
|
||||||
|
var express = require('express'); // import
|
||||||
|
var router = express.Router();
|
||||||
|
|
||||||
|
var mystr = "I am sending this DATA from backend to Frontend";
|
||||||
|
|
||||||
|
/* GET my page */
|
||||||
|
router.get('/', function(req, res, next) {
|
||||||
|
res.send(mystr);
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
```
|
||||||
|
7. Open app.js and `add this line`
|
||||||
|
```
|
||||||
|
var createError = require('http-errors');
|
||||||
|
var express = require('express');
|
||||||
|
var path = require('path');
|
||||||
|
var cookieParser = require('cookie-parser');
|
||||||
|
var logger = require('morgan');
|
||||||
|
var cors = require("cors"); // add this line
|
||||||
|
|
||||||
|
var indexRouter = require('./routes/index');
|
||||||
|
var usersRouter = require('./routes/users');
|
||||||
|
var mypageRouter = require('./routes/mypage'); // add this line
|
||||||
|
|
||||||
|
var app = express();
|
||||||
|
|
||||||
|
// view engine setup
|
||||||
|
app.set('views', path.join(__dirname, 'views'));
|
||||||
|
app.set('view engine', 'pug');
|
||||||
|
|
||||||
|
app.use(logger('dev'));
|
||||||
|
app.use(express.json());
|
||||||
|
app.use(express.urlencoded({ extended: false }));
|
||||||
|
app.use(cookieParser());
|
||||||
|
app.use(express.static(path.join(__dirname, 'public')));
|
||||||
|
|
||||||
|
app.use(cors()); // add this line
|
||||||
|
app.use('/', indexRouter);
|
||||||
|
app.use('/users', usersRouter);
|
||||||
|
app.use('/mypage', mypageRouter); // add this line
|
||||||
|
|
||||||
|
// catch 404 and forward to error handler
|
||||||
|
app.use(function(req, res, next) {
|
||||||
|
next(createError(404));
|
||||||
|
});
|
||||||
|
```
|
||||||
|
8. Install cors locally. Navigate to `backend` folder
|
||||||
|
```
|
||||||
|
$ sudo npm install cors
|
||||||
|
```
|
||||||
|
9. Open browser and navigate to [http://localhost:7000/mypage](http://localhost:7000/mypage). You should see
|
||||||
|
```
|
||||||
|
I am sending this DATA from backend to Frontend
|
||||||
|
```
|
||||||
|
|
||||||
|
## Editing Frontend in VSCode
|
||||||
|
1. Navigate to frontend
|
||||||
|
2. Open `/src/App.js`. Delete everything and copy the following
|
||||||
|
```
|
||||||
|
import React from 'react';
|
||||||
|
import logo from './logo.svg';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state = { serverResponse: "" };
|
||||||
|
}
|
||||||
|
|
||||||
|
callAPIServer() {
|
||||||
|
fetch("http://localhost:7000/mypage")
|
||||||
|
.then(res => res.text())
|
||||||
|
.then(res => this.setState({ serverResponse: res }))
|
||||||
|
.catch(err => err);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() { // react lifecycle method componentDidMount()
|
||||||
|
// will execute the callAPIServer() methods afteer the component mounts
|
||||||
|
this.callAPIServer();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
|
<h1 className="App-title">Welcome to FintechSG React Course</h1>
|
||||||
|
<h2 className="App-intro">{this.state.serverResponse}</h2>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
```
|
||||||
|
9. Open browser and navigate to [http://localhost:3000](http://localhost:3000). You should see
|
||||||
|
```
|
||||||
|
Welcome to FintechSG React Course
|
||||||
|
|
||||||
|
I am sending this DATA from backend to Frontend
|
||||||
|
```
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@ -0,0 +1,193 @@
|
|||||||
|
# NUSMoney Frontend
|
||||||
|
|
||||||
|
1. Create react project
|
||||||
|
```
|
||||||
|
npx create-react-app nusmoney
|
||||||
|
```
|
||||||
|
2. Replace `App.js, App.css,brand-logo.png` reference code
|
||||||
|
* App.js
|
||||||
|
```javascript
|
||||||
|
import React from "react";
|
||||||
|
import logo from "./brand-logo.png"
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
newBank: "",
|
||||||
|
bankList: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
addBank(bankName) {
|
||||||
|
if (bankName !== "") {
|
||||||
|
const newBank = {
|
||||||
|
id: Date.now(),
|
||||||
|
value: bankName,
|
||||||
|
isDone: false
|
||||||
|
};
|
||||||
|
const bankList = [...this.state.bankList]; //get the Banklist from state
|
||||||
|
bankList.push(newBank); //add new back to the list
|
||||||
|
|
||||||
|
this.setState({ //update the state
|
||||||
|
bankList,
|
||||||
|
newBank: ""
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteItem(id) {
|
||||||
|
const bankList = [...this.state.bankList];
|
||||||
|
//const updatedbankList = bankList.filter(item => item.id !== id);
|
||||||
|
const updatedbankList = bankList.filter(function(item){return item.id !== id});
|
||||||
|
this.setState({ bankList: updatedbankList });
|
||||||
|
}
|
||||||
|
|
||||||
|
updateInput(input) {
|
||||||
|
this.setState({ newBank: input });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<img src={logo} width="50" alt="brand logo" className="logo" />
|
||||||
|
<h1 className="app-title">Fintech@SG NUSmoney App</h1>
|
||||||
|
<div className="container">
|
||||||
|
Add your new Bank....
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="input-text"
|
||||||
|
placeholder="Input your new bank"
|
||||||
|
required
|
||||||
|
value={this.state.newBank}
|
||||||
|
onChange={e => this.updateInput(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="add-btn"
|
||||||
|
onClick={() => this.addBank(this.state.newBank)}
|
||||||
|
disabled={!this.state.newBank.length}
|
||||||
|
>
|
||||||
|
Add Bank
|
||||||
|
</button>
|
||||||
|
<div className="list">
|
||||||
|
<ul>
|
||||||
|
{this.state.bankList.map( (item) => {
|
||||||
|
return (
|
||||||
|
<li key={item.id}>
|
||||||
|
|
||||||
|
{item.value}
|
||||||
|
<button
|
||||||
|
className="btn"
|
||||||
|
onClick={() => this.deleteItem(item.id)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
<li>
|
||||||
|
DBS Bank
|
||||||
|
<button className="btn">Delete</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
```
|
||||||
|
|
||||||
|
* App.css
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
background: #97d5e8;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-text {
|
||||||
|
display: inline;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list ul li button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0%;
|
||||||
|
background: #f34541;
|
||||||
|
color: #fff !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
color: #fff !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
background: #7313cb;
|
||||||
|
margin: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 70px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
/* remove default padding and margin from ul*/
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.list ul li {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000000;
|
||||||
|
background-color: #ffffff;
|
||||||
|
line-height: 30px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: #cccccc;
|
||||||
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
color: #fff;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Navigate to nusmoney. Start the server
|
||||||
|
```
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
4. Navigate browser to [http://localhost:3000](http://localhost:3000)
|
||||||
|
5. The page should display
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue