Skip to content

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

License

Notifications You must be signed in to change notification settings

denisecase/web-app-2020-fall

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

web-app-2020-fall

Build Status Codacy Badge GitHub repo size code style: prettier Code Style Known Vulnerabilities

All Contributors

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

Links

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

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

Mozilla Observatory (Live Security Check)

Sequelize & PostgreSQL

Express

EJS CRUD

Deploying on Heroku

Authentication & Authorization

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!