CSXL full-stack workshop setup!

Back-end

Howdy, hope you are doing having a wonderful day! Let's get started with this set up.

The basics

1. Fork this repo by clicking the fork button on the top right corner.
2. After that, clone your forked repo into your machine. By doing this:
   • Click on the green code button on your repository page.
   • Select HTTPS or SSH, and copy the link displayed to you.
   • Then, run git clone your@link in your terminal window!
3. All of this being done, run cd csxl-fullstack/back-end
4. When you are in the back-end directory, you are ready to install some essentials things!

Housekeeping

N.B. If you have Python 3 installed you might have to use python3 as opposed to python.

5. Please follow the instructions in this link to install python and the necessary tools for this workshop. You can safely ignore the Zoom instructions.
6. In the csxl-fullstack/back-end directory, run python -m pip install -r requirements.txt.
7. Then, run python -m uvicorn main:app --reload.

Sanity check!

8. If everything is working properly, if you go to this url, you should see a "Hello World" message!
9. Please take a screenshot of this screen and submit it along with your workshop registration form!

Front-end

Hello! Thanks for signing up for our workshop – I'm so excited! For now, let's walk through setting up your workspace.

The basics

1. If you've made it here, you've possibly already forked this repository! If you haven't, do that now, and open it in your fav text editor (I'm using vscode)
2. You will need Node.js and NPM installed on your system to run anything. First, check if you have both already by opening a terminal and running node -v and npm --v.
   1. If both of these produce numbers (>=14.0.0 for Node and >=5.6 for npm), you're all set!
   2. If not, download them here and follow the installation prompter. After download, return to step 2 to make sure it worked!

Housekeeping

3. Let's get you into the right directory.
   1. If you're in vscode, you can right-click on the front-end directory and press 'open in integrated terminal'. Boom.
   2. (If you're in vscode or not), you can open a terminal and cd (change directory) into front-end. You can do this by first running pwd to make sure you're in the csxl-fullstack directory (what prints out should end with csxl-fullstack), then run cd front-end. This is a simple way to navigate directories via the command line!
4. Now we're in the front-end directory. Here is where all of the starter code for the workshop is! What we're concerned with now is making sure you have all the dependencies we'll need installed.
   • To do this, run npm i. That's it! This magic command looks at the dependencies/dev dependencies listed in package.json and makes sure you have them installed locally.

Sanity check!

5. Now, to make sure everything installed smoothly, let's test the two development environments we'll be using.
   1. We will be using Storybook to develop and test components. In the terminal, run npm run storybook to run the application. Go to the URL the command outputs (likely localhost:6006), and make sure you see a Storybook page that begins with 'Hey, welcome to Storybook!' If you see this, you're golden.
   2. Please take a screenshot of this screen and submit it along with your workshop registration form!
   3. To start the development server for our web app, run npm start. This should start a local dev server (probably localhost3000) – go to this page, and you should see a pink/purple webpage that begins with 'Hello, dev!'
   4. Please take a screenshot of this screen and submit it along with your workshop registration form!
6. If you were able to see these two environments, you're all set! If not, consider this a time to explore StackOverflow and/or come to the XL for help! (see the next section for more info)

You're done!

Nice work! I'm excited to meet and work with y'all – feel free to peruse the workspace if you'd like, but we will go through everything together on Thursday! Cheers!

Stay calm!

Don't worry if you got some errors, please stop by the XL (SN027) and we'll be more than happy to help you out.

Alternatively, you can email Felipe at [email protected] (back-end) and/or Claire at [email protected] (front-end)!

Finally

If you have read this far, please email both of us with your name, year, pronouns, and any web dev experience (none is expected! we just want to gague where y'all's understanding is). Optionally, you can also send us a joke.

See you soon!

Addendum

Please write this code in your back-end/main.py file. Just under the app = FastAPI() line.

origins = [
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

You can also add these lines to the top of your main.py file. For some lines, you might just have to add a couple of imports.

from typing import List
from fastapi import FastAPI, Depends
from fastapi.middleware.cors import CORSMiddleware
from database.settings import Base, engine, get_db
from models import LinkCreate
from database.crud import get_all_links, create_db_link, delete_db_link