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

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.

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

Step 1 - Get fresh code.

1. Pull fresh code. (Fork & clone if this is the first time.)
2. Run npm install
3. Run npm run start
4. Verify everything runs.

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. Immediately, make your local edits.
2. Verify the app still runs & standarize your code (see commands below)

npm install
npm run start

npm run prettier
npm run lint
npm run lint-fix

Step 3 - Save 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.

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/

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 App)

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

• Express API with Postgres
• See repo
• Getting Started with Sequelize and Postgres
• Getting Started with Node, Express and PostgreSQL using Sequelize
• EJS CRUD tutorial
• EJS CRUD repo
• MDN Guide to Publishing with Heroku
• Provising Heroku Postgres