Setting Up Express, NPM, and React - ryantc94/Knights-of-Arthur GitHub Wiki
Welcome to the "Kill The Werewolf" wiki!
Documenting Process
Feb 23, 2018
Currently I am trying to figure out how to simply start express again. This is sort of a review. Below I will document command line steps and so forth. Notes for certain steps will documented with an asterisk (*). I should probably research how to write readMe markup...
Express
A web framework is a set of tools, libraries or software that reduces the overhead of developing web applications.
****since express is built ontop of http as an http module library, you still need to go create an http node server
Some features that a web framework may provide are: →
templating - to keep logic out of your presentation routing - for mapping urls to pages/functionality middleware - a pipeline of functions to manipulate and work with the request and response database access - an abstraction layer for dealing with databases general project structure - a standard way for organizing your project
Web frameworks can also be very minimal:
only providing a small amount of core functionality … and leaving other features to be integrated piecemeal as needed (these tend to be smaller, and more bare bones)
A Microframework, or a minimal web framework:
has a simple, but extensible set of core functionality won't make too many design decisions for you (and the ones that are made are usually changeable) leaves many features up to the developer (and usually relies on third-party tools and libraries for those features) maybe even fits in a single file!
A little bit about Express:
built on top of node and node's http module you'll find some familiar (but augmented) objects, like request and response minimal, more like sinatra or flask rather than rails or django flexible - your project layout is up to you, you choose what features you'd like integrated, etc.
express() - creates a new express application
allows for configuration takes on functionality of Server object in http module only example note that you can call some methods on it based on http verbs (request methods)
app.VERB(path, [callback]…, callback) - defines routes
verb is an HTTP request method (such as get) maps a url to a callback (or multiple callback functions) path is case insensitive, can have trailing slash and query string
res.send([body]) - send a response
sends all set headers if the body is a string, content type is set to text/html if the body is an object or an array, content type is set to application/json
res.set() - set a response header
data in a POST request is sent within the body http://jvers.com/csci-ua.0480-fall2016-007/slides/09/request-response.html#/12 data in a GET request is sent in the url's query string as name value pairs: ?firstname=joe&lastname=versoza http://jvers.com/csci-ua.0480-fall2016-007/slides/09/request-response.html#/13
response http://jvers.com/csci-ua.0480-fall2016-007/slides/09/request-response.html#/17
React (Create-React-App)
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md
'npm init'
* package.json is used for specifying how your code is imported into another file (what name to use, what the license is, etc.).
* main in package.json specifies the entry point of your app (for module importing)
* dependencies - tracks required libraries and packages for you actual project to be installed and deployed 'npm install --save'
* devDependencies - dependencies that are only necessary if you're working on or developing a project 'npm install --save-dev'
'npm install express-generator' 'npm install --save-dev babel-cli babel-preset-env' 'npm install --save-dev babel-preset-es2015 babel-preset-stage-2'
npm scripts have unique keywords for scripts (added a script in package json to start dev)
Package.json Proxy
The way this works is, any time your React app makes a request to something that’s not a static asset (not an image or CSS or index.html, basically), it will forward the request to the server specified in "proxy".