Full-stack-setup.md

Instructions

Our First Full Stack Project Setup

Ironlauncher installation

We will use Ironlauncher package that we used in module2 to set up our full-stack project code template. But this time we'll use to set up our client side code as well. (Note: create-react-app is inbuilt in this package)

Open your command terminal, go to the folder where you want to create your project and run

npx ironlauncher@latest PROJECT_NAME --fs

eg. npx ironlauncher@latest ReactTodos --fs

This will create a folder called ReactTodos which will have two folders called client and server in it.

Go ahead and open the contents of each of the folder in a separate VSCode window PS: You will have two VScode windows running after this step, one with the client side code and the other with the server side code.

This setup will also test how much your machine loves you before crashing, go ahead and open up Postman and MongoCompass as well (Assuming you have Slack and Zoom already running).

Why open them both up ?

We will use Postman to check if our server side routes are working correctly before building anything in React. MongoCompass will be needed to check if data is getting added in our database

Part 1 | Always start building your server first

Open the contents in your server folder in a VSCode window

Your server will only be used to create /read/ update/ delete data from the database, everything else React will take care of.

1.1 Create your model

Create new file called Todo.model.js inside your models folder and add these contents listed here https://gist.github.com/ManishPoduval/a490ab0d6617b9504cf7826e4a638b91

1.2 Create your routes

Create new file called todo.routes.js inside your routes folder and add these contents listed here
https://gist.github.com/ManishPoduval/e72284abf556438e7003cfa7c1d43d95

1.3 Link your routes in `app.js`

Make sure you have linked your newly create routes in your app.js file Add the below code right where route handling starts

const todoRoutes = require('./routes/todo.routes');
app.use('/api', todoRoutes);

Your code in app.js will look like this

IMPORTANT

Notice the /api we add ?

That is because all server side routes must start with /api to avoid getting confused with client side routes we will add in React with the same endpoint

Part 2 | Check if your server code is working

In your server side VScode, open your terminal and run npm run dev

If everything is successful, you will see your server running on port 5005 connected to a database same as your project name

If you're wondering why port 5005 , there is no reason as such but you can always change the port from your .env file

PS: Any port apart from `3000` will do because that one is used by your React code

Part 3 | Test your server routes it via POSTMAN

3. 1 Testing your first route in `todo.routes.js`

router.get('/todos',

Open Postman and make a GET request to http://localhost:5005/api/todos/

Please don't forget the /api .

You should ideally see an empty array being returned. That is fine. (Because there is no data in your database)

3. 2 Testing your second route in `todo.routes.js`

router.post('/create'

In Postman and make a POST request to http://localhost:5005/api/create/ . Since it's a post request you will also need to send some data

What data to send ??? 🤔 😕

Take a look at the first line in that route

const {name, description, completed} = req.body;

It's expecting you to send name description and completed as inputs. You can send inputs from the Body tab via x-www-form-urlencoded in Postman Make sure you make a POST request

Send the request, check MongoCompass and see if you see any data in the ReactTodos database

Add a couple of more todos and repeat step 3.1

Try testing for the other routes as well. Try the DELETE and PATCH request.

Part 4 | Start building your React App

Don't shut down your server, let it continue running.

Open your client contents in a new VSCode window if you haven't.

Notice the .jsx extensions, its just something fancy, there is literally no difference for us as developers.

We will need some styling to be done so let's install bulma.

Shoot no, not bulma, never.

Please install react-bootstrap

You can read the docs here or run the below command in your terminal

npm install react-bootstrap bootstrap

Also import the css in your index.js file in your client side code

import  'bootstrap/dist/css/bootstrap.min.css';

You need to run your client side code by opening a new Terminal in VSCode and typing npm start

If you see something like this, you're good to go

Part 5 | Pay attention in class and avoid chatting too much 😂

We will need lots of components for today. Firstly delete everything that is currently there in the components folder, delete the components, config, pages, utils folder. There is too much complexity for you today. So we'll simplify it a little bit for today.

Refactor your App.js to be a simple class component

import { Routes, Route } from  "react-router-dom";

function App(){
	return (
		<div  >
			<h1>Shopping List</h1>
		</div>
	);
}

export  default App;

Create 5 empty class components in your components folder MyNav.js , TodoList.js , TodoDetail.js, AddForm.js and EditForm.js

Add this simple code in your MyNav.js

import {Navbar, Nav} from  'react-bootstrap'
import {Link} from  'react-router-dom'

function MyNav() {
return (
	<Navbar  bg="light"  expand="lg">
		<Navbar.Toggle  aria-controls="basic-navbar-nav"  />
		<Navbar.Collapse  id="basic-navbar-nav">
			<Nav  className="mr-auto">
				<Link  to="/">Todos</Link>
				<Link  style={{marginLeft: '10px'}}  to="/add-form">Add Todo</Link>
			</Nav>
		</Navbar.Collapse>
	</Navbar>
	)
}
export  default MyNav

Add this simple code in your AddForm.js

import {Button} from  'react-bootstrap'

function AddForm(){
	return (
		<form>
			<input  name="name"  type="text"  placeholder="Enter name"/>
			<input  name="description"  type="text"  placeholder="Enter desc"/>
			<Button  type="submit"  >Submit</Button>
		</form>
			)
}

export default AddForm

At some point, maybe on Monday we will also need a config.js file which we'll create in our src folder

export  default {
	API_URL: process.env.REACT_APP_SERVER_URL
}

Now pay attention to what we do in class!

Happy coding! ❤️

Good luck for the Ironbeers later today ❤️ ❤️

ManishPoduval/Full-stack-setup.md