Week 4 Lab

3 mins to read

Lab will consist of several parts today:

Setting up your midterm (and final) project - See Below
Some basic usage of React components on lab.ci256.cloud

You won’t need to submit anything for your midterm project, but it’s highly recommended to complete this part in-class with the professor in-case any issues arise.

IF YOU DID NOT RECEIVE AN EMAIL WITH GIT CREDENTIALS, let me know ASAP so we can get you fixed up!

Starting the Midterm Project

LAB SYSTEMS: Create the repo on your Desktop, your H drive will give you a bad time

Shift + Right Click Desktop

“Open Git Bash Here”

PERSONAL SYSTEMS: Ensure you have Git Bash and NodeJS Installed

If you experience any issues, don’t hesitate to call over the professor!

Run the following commands to create a basic react app and install a few extra dependencies we’ll be using.

npm create vite@latest ci256-project -- --template react
cd ci256-project
npm install @mui/joy @emotion/react @emotion/styled @fontsource/inter @mui/icons-material

Tip! You must right click -> paste, or use ctrl + shift + v, to paste into git bash. You can’t use the normal ctrl + v

Open VSCode in the current project directory
```
code .
```
Run the app with the following command.
- This starts a local development server, allowing you to access your new project in a web browser at http://localhost:5173
```
npm run dev
```

Make a couple of edits to the #root element in src/App.css

Remove padding: 2rem
Add width: 100%;

  #root {  
	max-width: 1280px;  
	margin: 0 auto;  
	/* remove this line */
    padding: 2rem;  
	text-align: center;  
	/* add this line */
    width: 100%;
  }

Replace the entire contents of src/App.jsx with the following

import './App.css'  
import {CssVarsProvider, Box, Grid} from "@mui/joy";  

function App() {  
  return (  
    <CssVarsProvider>  
	  <Grid container direction="column" sx={{minHeight: '100vh'}}>  
	    <Box sx={{  
	      background: 'green'  
	    }}>  
	      Navbar  
	    </Box>  
	    <Grid container sx={{flexGrow: 1}}>  
	      <Box sx={{  
	        maxWidth: "300px",  
	        flexGrow: 1,  
	        background: 'lightgray',  
	      }}>  
	        Sidebar  
	      </Box>  
	      <Box sx={{flexGrow: 2, background: 'blue'}}>  
	        Content  
	      </Box>  
	    </Grid>
	  </Grid>
    </CssVarsProvider>  
  )  
}  

export default App

Your app should have automatically updated in the web browser! Make sure it renders with no errors.

Uploading project to git

Great! Now that our project is up and running, lets save our work by getting it checked into git.

Tip: You must use ctrl + c to stop the the dev server from npm run dev. This will get your terminal back.

Initialize a git repo
```
git init
```
Stage the files
```
git add .
```
Commit the files
```
git commit -m "initial commit"
```
Set up the remote server - don’t forget to switch out your username!
```
git remote add origin https://git.ci256.cloud/2025/USERNAME.git
```
Push the changes to the server
```
git push -u origin main
```

Tip: Going forward, you can use the Git Reference Sheet. This section has some special commands to setup up the repository for the first time.