fullstackapp/fullstack.md

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
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
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. 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;
   

3. Open browser and navigate to http://localhost:3000. You should see

          Welcome to FintechSG React Course
   
   I am sending this DATA from backend to Frontend