https://github.com/denisecase/web-app-2020-fall
Example of a collaborative MVC web app built with the Express web framework for Node.js.
https://github.com/denisecase/web-app-2020-fall
codacy-badge css ejs eslint express heroku html javascript mvc node postgresql prettier sequelize sqlite3 webapps
Last synced: 11 months ago
JSON representation
Example of a collaborative MVC web app built with the Express web framework for Node.js.
- Host: GitHub
- URL: https://github.com/denisecase/web-app-2020-fall
- Owner: denisecase
- License: mit
- Created: 2020-10-20T16:08:17.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-14T23:17:21.000Z (over 1 year ago)
- Last Synced: 2025-03-25T10:17:32.634Z (12 months ago)
- Topics: codacy-badge, css, ejs, eslint, express, heroku, html, javascript, mvc, node, postgresql, prettier, sequelize, sqlite3, webapps
- Language: JavaScript
- Homepage: https://web-app-2020-fall.herokuapp.com/
- Size: 980 KB
- Stars: 0
- Watchers: 2
- Forks: 26
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# web-app-2020-fall
[](https://travis-ci.org/denisecase/web-app-2020-fall)
[](https://app.codacy.com/gh/denisecase/web-app-2020-fall?utm_source=github.com&utm_medium=referral&utm_content=denisecase/web-app-2020-fall&utm_campaign=Badge_Grade)
[](https://github.com/prettier/prettier)
[](https://github.com/airbnb/javascript)
[](https://snyk.io/test/github/denisecase/web-app-2020-fall?targetFile=package.json)
[](#contributors-)
> Example of a collaborative MVC web app built with the Express web framework for Node.js.
## Links
- [Webapp on Heroku](https://web-app-2020-fall.herokuapp.com/)
- [Source](https://github.com/denisecase/web-app-2020-fall)
## Set Up Machine for Development
First, set up your Windows machine for development - follow the instructions at [Windows Setup For Developers (The Basics)](https://github.com/denisecase/windows-setup). 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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [DB Browser for SQLite](https://sqlitebrowser.org/dl/), e.g., standard for 64 Windows. Save the .msi file and double-click to run it.
```PowerShell
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](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)
- [Heroku login](https://id.heroku.com/login)
- [PostgreSQL local install](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads)
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](https://sourcelevel.io/blog/how-to-setup-eslint-and-prettier-on-node)
## Build Responsive Apps (for all screen sizes)
- We choose [MDB 5](https://mdbootstrap.com/docs/standard/) (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.
```Powershell
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.
```PowerShell
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)
```Powershell
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.
```PowerShell
npm run start
```
View the application locally at
## Reference Command Examples
Sequelize commands
```PowerShell
npx sequelize-cli db:migrate
```
PostgreSQL commands (for Production Database)
```PowerShell
Start-Process 'C:\Program Files\PostgreSQL\13\scripts\runpsql.bat'
psql "${DATABASE_URL}"
```
Heroku commands (for production reference)
```PowerShell
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](https://github.com/goldbergyoni/nodebestpractices)
- [US Gov: Before You Ship - Static Security Analysis](https://before-you-ship.18f.gov/security/static-analysis/)
- [OWASP: Node Security Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html)
- [Express: Security Best Practices](https://expressjs.com/en/advanced/best-practice-security.html)
- [ES Lint: Config](https://github.com/EvgenyOrekhov/eslint-config-hardcore)
Mozilla Observatory (Live Security Check)
- Test any app with [Mozilla Observatory (security check)](https://observatory.mozilla.org/)
- Test our app with [Mozilla Observatory](https://observatory.mozilla.org/analyze/web-app-2020-fall.herokuapp.com)
Sequelize & PostgreSQL
- [Getting Started with Sequelize and Postgres](https://dev.to/nedsoft/getting-started-with-sequelize-and-postgres-emp)
- [Getting Started with Node, Express and PostgreSQL using Sequelize](https://morioh.com/p/fe03e5149f97)
Express
- [MDN Web Docs - Express Web Framework](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs)
EJS CRUD
- [EJS CRUD tutorial](https://www.mynotepaper.com/nodejs-simple-crud-with-expressjs-and-mysql)
- [EJS CRUD repo](https://github.com/mdobydullah/nodejs-crud-with-expressjs-mysql)
Deploying on Heroku
- [MDN Guide to Publishing with Heroku](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment)
- [Provising Heroku Postgres](https://devcenter.heroku.com/articles/heroku-postgresql#provisioning-heroku-postgres)
Authentication & Authorization
- [NWMSU GDP1 - The Hunt](https://github.com/Krishna-Koyyalamudi/The-Hunt)
- [ISA NWMSU Repo (GDP 2 Team 4 Section 2)](https://github.com/MAHALAKSHMIKONGARI/GDP_Team-4_Section-2) - example using passport and passport-jwt for user authentication and authorization
- [ISA NWMSU App](http://isanwmsu.herokuapp.com/)
# Contribute
See our [Contributing Guide](./CONTRIBUTING.md) for instructions on how to contribute code.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Your contributions are appreciated!