consolidate notes
parent
e7384c7538
commit
363897a095
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@ -1,158 +1,57 @@
|
||||
# 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
|
||||
```
|
||||
# Frontend - Backend
|
||||
|
||||
## Server Client Project
|
||||
|
||||
### Prerequisite
|
||||
|
||||
* Run cmd in administrator mode
|
||||
* npm - node package manager
|
||||
* Install `React` for frontend
|
||||
```
|
||||
$ npm install -g create-react-app
|
||||
```
|
||||
* Install `express` for backend
|
||||
```
|
||||
$ npm install -g express-generator
|
||||
```
|
||||
* Install `cors` ??for backend
|
||||
```
|
||||
$ npm install -g save cors
|
||||
```
|
||||
|
||||
|
||||
## Prepare Client (Frontend)
|
||||
|
||||
* run npx (node package execute) from command line
|
||||
```
|
||||
$ npx create-react-app frontend
|
||||
```
|
||||
* navigate to `frontend` folder. start
|
||||
```
|
||||
$ cd frontend
|
||||
$ npm start
|
||||
```
|
||||
|
||||
## Prepare Server (Backend)
|
||||
|
||||
* run from command line
|
||||
```
|
||||
$ express --view=pug backend
|
||||
$ cd backend
|
||||
|
||||
// optional : something global install not working
|
||||
$ npm install cors
|
||||
|
||||
// install dependencies defined in package.json
|
||||
$ npm install
|
||||
```
|
||||
* navigate to `backend` folder. start
|
||||
```
|
||||
$ cd backend
|
||||
$ npm start
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
1. [NUSMoney](nusmoney.md) frontend
|
||||
2. [Fullstack](fullstack.md) process
|
||||
|
||||
@ -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