DEPRECATED/OUTDATED

This project has moved to another repo here.

📝 node-website-template

Use this template to initialize your Express, MongoDB, and Node.js web application or website with a basic structure and starter code stylized with Bootstrap.

Work In Progress

🚀 Getting Started

Installation

• Download Node.js.
• Download the nodemon package globally.
• Download MongoDB Community Server.

Initialization & Setup

1. Create a .env file to hold environment variables. (dotenv module)
2. Edit the name of your database by editing the DB_NAME constant in index.js.
3. Edit metadata information for SEO and data accuracy in:
   • package.json
   • README.md
   • dist/manifest.json
   • dist/robots.txt
   • dist/sitemap.xml
   • views/landing.ejs
4. Run npm install to install packages.

🎓 Usage/Workflow Details

Development Process

1. Ensure that your MongoDB server is running locally for database functionality.
2. Run nodemon in your terminal while testing to automatically refresh your back-end after editing.
3. Develop front-end by creating HTML pages w/ EJS in the views directory and editing styles in dist/styles/styles.css.
4. Work on back-end by editing models, routes, and index.js.
5. (optional) Customize Bootstrap CSS in src/custom.css and compile it with npm run sass to export your bundled CSS to dist/styles/bootstrap.css.

Scripts

Run npm install in the root directory to install packages.
Run npm run sass to compile Bootstrap CSS from the src folder.
Run npm run build to compile CSS and Javascript from the src folder.
Run npm run build:css to compile Bootstrap CSS and postprocess vendor prefixes in dist/styles/styles.css.
Run npm run build:js to compile (w/ webpack) JavaScript libraries from the src folder.

Directory Details

1. The dist directory contains front-end and site metadata.
2. The models directory contains MongoDB models.
3. The routes directory contains routes for endpoints and API calls.
4. The src directory contains pre-compiled Bootstrap CSS and JS that is to be bundled into front-end (dist) using the scripts mentioned above in the Installation Details.
5. The views directory contains the EJS pages to be rendered by Express.

Deployment

1. Create a MongoDB Atlas database and collection and copy your connection URI.
2. Create a Heroku app and enable automatic deployment to your repository.
3. Set environment variables for your Heroku app
   1. MONGO_URI - Your MongoDB Atlas connection URI.
   2. SESSION_SECRET - Express session secret

⚓ Current Release Details

Bootstrap CSS v5.0.0
Express v4.x
Mongoose v5.11.15

Packages Included

• @fortawesome/fontawesome-free - Font Awesome Icons
• autoprefixer - adding vendor prefixes to css
• bcrypt - password-hashing
• bootstrap & @popperjs/core - styling
• body-parser - essential for express
• chalk - colorful terminal output
• compression, cors, helmet, serve-favicon - essential middleware
• dompurify & jsdom - sanitization
• dotenv - environment variables
• ejs - template engine
• express - essential
• express-session - sessions
• fs-extra - updating Font Awesome icons
• jquery - dynamic page elements
• lodash - coding utility
• method-override - enabling methods for the client
• mongoose - database functionality
• nodemon - development quality of life
• postcss & postcss-cli - CSS postprocessing (ex: autoprefixer)
• sass - customizing and compiling Bootstrap
• validator - formatting validation
• webpack & webpack-cli - JS postprocessing

📅 Future Release Plans

• Different ports for other styling frameworks like Tailwind
• E-mail encryption and forgot password functionality
• More detailed starter code
• Additional example pages

🗒️ Additional Resources

Best Practices

• Google HTML/CSS Style Guide
• Google JavaScript Style Guide

Documentation

• Bootstrap Docs
• Express 4.x API Docs
• Lodash Docs
• Mongoose Docs

Tools and References

• Can I Use... - Browser support tables for HTML5, CSS3, etc
• Coolors Color Picker
• Font Awesome Icons Gallery
• Google Fonts
• Hero Patterns - Customizable SVG background patterns
• Lorem Ipsum Generator
• Placeholder.com - Free image placeholder service
• Regex Expression Tester
• Scale - Free and customizable vector illustrations
• SRI Hash Generator