web-app-2020-fall

Example of a collaborative MVC web app built with the Express web framework for Node.js.

Links

• Webapp on Heroku
• Source

Set Up Machine for Development

First, set up your Windows machine for development - follow the instructions at Windows Setup For Developers (The Basics). Be able to right-click your project folder and "Open PowerShell here as Administrator".

Prerequisites

• Node.js (comes with npm)
• Git
• TortoiseGit
• VS Code
• VS Code Extension - Prettier
• DB Browser for SQLite, e.g., standard for 64 Windows. Save the .msi file and double-click to run it.

choco install nodejs -y
choco install git -y
choco install tortoisegit -y
choco install vscode -y
choco upgrade all -y
refreshenv

Prerequisites for Publishing

• Heroku CLI - to publish
• Heroku login
• PostgreSQL local install

Create Heroku app with Heroku Postgres (Hobby Dev - free) add-on.

Background - How to Start a New App like this

• Run Express-generator with EJS (dynamically create pages with HTML & embedded JS)
• Update the JavaScript - change var to const, use async/await
• Change package.json versions to "latest" - until you have issues, then freeze a version
• Add folders to organize your code
• Update to use Express app4 updates - stay current
• Set up ESLint and Prettier

Build Responsive Apps (for all screen sizes)

• We choose MDB 5 (Material Design Bootstrap 5 - no jQuery)

Add App-Specific Resources

Follow conventions - use standard lowercase, no spaces, follow naming patterns

Enable standard CRUD options (create, read, update, delete)

• Make a model & seed some data on startup
• Route requests to specific routers
• Route CRUD requests to controller functions
• Create standard views for the resource

1. create.ejs
2. delete.ejs
3. details.ejs
4. edit.ejs
5. index.ejs

Add a standard comment block at the top of each file.

Add yourself and email as the author (follow examples).

How to Contribute

First time only

1. Click the fork icon on this repo to fork it into your own cloud account.
2. Clone your new cloud repo down to your machine.

Step 1 - Get fresh code

1. Pull fresh code from shared cloud repo.
2. Update your cloud repo (git add and push).
3. Install dependencies (assume there have been changes).
4. Start the app.
5. Open your browser to verify everything runs.

git pull "https://github.com/denisecase/web-app-2020-fall.git"
git add .
git push
npm install
npm run start

Step 2 - Make your contributions

As you test your code, format it with Prettier and lint (clean it up) with ESLint. See scripts in package.json.

1. While code is fresh, make your local edits.
2. Verify the app still runs & standarize your code.

npm install
npm run start

npm run prettier
npm run lint
npm run lint-fix

Fix your code as suggested by the linter.

Step 3 - Save and share your work

1. Git add & git commit locally.
2. Git push to the origin.
3. In your updated GitHub repo look for "Pull Request".
4. Follow instructions (click the green buttons) to prepare a "pull request" into the main repo.

Step 4 - Refresh before making new contributions

1. Git pull from shared repo to your laptop
2. Git add any new files from root folder on down (git add .)
3. Git push to your origin repo (your forked repo in the cloud)

git pull "https://github.com/denisecase/web-app-2020-fall.git"
git add .
git push

Start Options

Start the app by running npm run start. Until error handling is complete, a clean shutdown is better. Once error handling is complete, use npm run dev to start with nodemon.

npm run start

View the application locally at http://localhost:3020/

Reference Command Examples

Sequelize commands

npx sequelize-cli db:migrate

PostgreSQL commands (for Production Database)

Start-Process 'C:\Program Files\PostgreSQL\13\scripts\runpsql.bat'
psql "${DATABASE_URL}"

Heroku commands (for production reference)

heroku login
heroku addons

heroku addons:create heroku-postgresql:hobby-dev
heroku ps:scale web=1 --app web-app-2020-fall

heroku config --app web-app-2020-fall
heroku pg:info --app web-app-2020-fall
heroku pg:diagnose --app web-app-2020-fall
heroku pg:psql postgresql-round-39059 --app web-app-2020-fall

heroku run sequelize --app web-app-2020-fall
heroku run sequelize db:migrate --app web-app-2020-fall

heroku logs --app web-app-2020-fall --tail
heroku open --app web-app-2020-fall

Resources

Security

• GitHub: Node.js Best Practices
• US Gov: Before You Ship - Static Security Analysis
• OWASP: Node Security Cheatsheet
• Express: Security Best Practices
• ES Lint: Config

Mozilla Observatory (Live Security Check)

• Test any app with Mozilla Observatory (security check)
• Test our app with Mozilla Observatory

Sequelize & PostgreSQL

• Getting Started with Sequelize and Postgres
• Getting Started with Node, Express and PostgreSQL using Sequelize

Express

• MDN Web Docs - Express Web Framework

EJS CRUD

• EJS CRUD tutorial
• EJS CRUD repo

Deploying on Heroku

• MDN Guide to Publishing with Heroku
• Provising Heroku Postgres

Authentication & Authorization

• NWMSU GDP1 - The Hunt
• ISA NWMSU Repo (GDP 2 Team 4 Section 2) - example using passport and passport-jwt for user authentication and authorization
• ISA NWMSU App

Contribute

See our Contributing Guide for instructions on how to contribute code.

Contributors

Thanks goes to these wonderful people (emoji key):

Denise Case 💻 📖	Stephen Burke 💻	Lindsey Fares 💻	Blake Bennett 💻	Sam Ritter 💻	varsha vellanki 💻	shivani tangellapally 💻
Chandler Wright 💻	Charles-Hoot 💻	Zach Watson 💻	praneethvallabhaneni 💻	PrashansaAmbarkar 💻	Jack Beaver 💻	Sri Vasavi 💻
FelipeGHB 💻	KarepeN 💻	Kunal 💻	Codacy Badger 💻	Snyk bot 💻

This project follows the all-contributors specification. Your contributions are appreciated!