Skip to content

A series of tutorials and curriculum-style README files to help walk you through your first steps into things like Material UI, Redux Saga and React Router.

Notifications You must be signed in to change notification settings

chrismochinski/Tutorials-Galore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HERE'S HOW WE DO THIS SERVER THINGY


  1. Open terminal and pick your destination directory. Then do aaaaaallll this stuff (see image):

    • mkdir name-of-directory --- (making the file you're gonna do stuff in)
    • cd name-of-directory --- (to go into it)
    • mkdir server --- (a nice new server folder)
    • touch .gitignore --- (blocks some crap from some crap)
    • cd server --- (changes your working directory to this)
    • mkdir public --- (public folder)
    • touch server.js --- (a file of important javascrip things n' stuff)
    • cd public --- (move into the public directory)
    • touch index.html --- (here's your main html page!)
    • mkdir scripts --- (here's a folder for your javascript you'll source)
    • mkdir vendors --- (here's a folder for jQuery)
    • mkdir styles --- (and, finally, a folder for your CSS )
    • cd .. --- (goes up one level)
    • cd .. --- (you've now gone UP two levels)
    • code . --- (open all that stuff up in VS Code!)

    terminal


  1. Go into your new VS Code window and add...

    • style.css to your styles directory
    • client.js to your scripts directory
    • jQuery (wherever you paste it from) into your vendors directory

    newFile

    ...it'll now look something like this:

    treeNow


  2. Do your HTML boilerplate, source your CSS/JS/JQ and make an H1 with something awesome in it. BE CAREFUL HOW/WHERE YOU SOURCE. Here is a screen grab of my FINAL HTML:


boilbabyboil


  1. Get your butt back over to Terminal and enter:

    • npm init --yes

    • this initializes your PACKAGE JSON
    • the --yes answers YES to all questions (a few will come in if you don't include this)

    this is what will appear:

inityes


You SUDDENTLY have a file called package.json in your little tree on the left in VS Code!! Open 'er up.


  1. After the line that starts with "test", type a comma. Then, hit enter and, on the nexts line, type the following:

    "start": "node server/server.js"

json


  1. Back in TERMINAL, type the following...

     npm install express
    

AND...

    npm install pg

(↑↑ added after week 9 ↑↑)

This will do some stuff to your tree and will drop a version at the bottom of your package.json file (mine says some crap ending with "express": "^4.17.1").

express


  1. Good luck memorizing THIS stuff...

    When we started using servers, we used type THIS stuff...

server

Now that we are using fancy databases and stuff, we do something more like THIS.

forgotten-slide


  1. in your .gitignore file, we STARTED typing this:

node_modules/
.DS_Store

Now that we're doing fancy database stuff, I've seen THIS:

goodindex


  1. MOMENT OF TRUTH...in Terminal, type:


npm start

it's working

The above is what you should see in terminal after you press ENTER...


  1. And here is what you should see in your index.html with the above steps -

goodindex


and, finally, in the browser when you enter localhost:5000

goodBrowser


  1. COMMIT BEFORE GOING FURTHER!


About

A series of tutorials and curriculum-style README files to help walk you through your first steps into things like Material UI, Redux Saga and React Router.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published