diff --git a/README.md b/README.md new file mode 100644 index 0000000..00dcf0c --- /dev/null +++ b/README.md @@ -0,0 +1,67 @@ +# 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 is 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; + ``` \ No newline at end of file diff --git a/backend/routes/mypage.js b/backend/routes/mypage.js new file mode 100644 index 0000000..3cd7280 --- /dev/null +++ b/backend/routes/mypage.js @@ -0,0 +1,11 @@ +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; \ No newline at end of file