This project has moved to another repo here.
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
- Download Node.js.
- Download the nodemon package globally.
- Download MongoDB Community Server.
- Create a
.envfile to hold environment variables. (dotenv module) - Edit the name of your database by editing the
DB_NAMEconstant inindex.js. - Edit metadata information for SEO and data accuracy in:
package.jsonREADME.mddist/manifest.jsondist/robots.txtdist/sitemap.xmlviews/landing.ejs
- Run
npm installto install packages.
- Ensure that your MongoDB server is running locally for database functionality.
- Run
nodemonin your terminal while testing to automatically refresh your back-end after editing. - Develop front-end by creating HTML pages w/ EJS in the
viewsdirectory and editing styles indist/styles/styles.css. - Work on back-end by editing
models,routes, andindex.js. - (optional) Customize Bootstrap CSS in
src/custom.cssand compile it withnpm run sassto export your bundled CSS todist/styles/bootstrap.css.
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.
- The
distdirectory contains front-end and site metadata. - The
modelsdirectory contains MongoDB models. - The
routesdirectory contains routes for endpoints and API calls. - The
srcdirectory 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. - The
viewsdirectory contains the EJS pages to be rendered by Express.
- Create a MongoDB Atlas database and collection and copy your connection URI.
- Create a Heroku app and enable automatic deployment to your repository.
- Set environment variables for your Heroku app
- MONGO_URI - Your MongoDB Atlas connection URI.
- SESSION_SECRET - Express session secret
Bootstrap CSS v5.0.0
Express v4.x
Mongoose v5.11.15
- @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
- Different ports for other styling frameworks like Tailwind
- E-mail encryption and forgot password functionality
- More detailed starter code
- Additional example pages
- 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