/Setup

Scaffolding for various web dev projects. Primarily doing this to learn and put something useful together for my team.

Primary LanguageHTML

Starter Kits

Published on January 1, 2018

My goals in putting this together:

  1. Have starter kits for the projects I'm interested in.
  2. Allow people to follow along with various walkthroughs. Instead of watching NodeJS REST API videos, use the starter kit to code along, adding any missing dependencies as you go. The kit also adds a lot of syntax help, which should hopefully allow you to weed out common mistakes early and focus on the actual app and language logic.
  3. Give a sense of the standard moving parts expected from modern software.

Inspired by the following sources:

  1. The JavaScript Starter Kit Manifesto: https://www.youtube.com/watch?v=jubd2opc4Ps

  2. Building a JavaScript Development Environment: https://app.pluralsight.com/library/courses/javascript-development-environment/table-of-contents

  3. PluralSight - Visual Studio Code: https://app.pluralsight.com/library/courses/visual-studio-code/table-of-contents

  4. The Agile Manifesto: http://agilemanifesto.org/

  5. The Twelve-Factor App: https://12factor.net/

  6. Front-End Developer Handbook 2017: https://frontendmasters.com/books/front-end-handbook/2017/

The Checklist

  1. OS prerequisites
  2. Project structure and shells used
  3. Package management - Managers
  4. Package management - Deprecation strategy
  5. Package management - Security
  6. Module management
  7. Version control + cloud storage
  8. Linting
  9. Formatting
  10. Transpiling
  11. IntelliSense
  12. Development Web Server
  13. Debugging
  14. Documentation
  15. Sharing work
  16. Bundling with sourcemaps, minification, concatenation, spriting (for images), and compression (TBD)
  17. Build/Task management
  18. Dynamic HTML generation (TBD)
  19. Centralized HTTP (TBD)
  20. Mocking framework (TBD)
  21. Testing suite (TBD)
    1. Framework
    2. Assertion Library
    3. Helper Libraries
    4. Where to run tests
    5. Where to place tests
    6. When to run tests
  22. Continuous Integration (TBD)
  23. Continuous Monitoring (TBD)

Assumption: You're running a Windows 7 machine.

The starter kits can be found in the app_* folders. Each kit is documented according to:

  1. The product intended to be created.
  2. How the kit answers The Checklist.
  3. What debugging capabilities are available.
  4. What workflows are available (as instantiated in the "scripts" section of package.json).

Before diving into the individual kit, please look over the following:

  1. Windows System Setup: If using Windows, the document shows how to install the following applications: Chocolatey, PowerShell, basic VSC setup, and, optionally, Yarn.
  2. VS Code Extensions: Contains a list of the VSC extensions I've found useful. vscodeextensions.bat is meant to install all of them in one shot, sequentially. If using a *nix-based system, just change the extension to sh.
  3. Checklist Overview: In this document, each Checklist item is introduced with some answers with relatively recent sources. The responses are meant as a very general overview, with the sources meant to fill in some of the gaps. The technologies enumerated only represent what I was able to research at the time. In our fast-moving industry, these players might not exist by the time you read this. That's not important. What is important is that you understand what each Checklist item is meant to do when propping up a successfull modern web app.
  4. Configs: This half-project-half-not contains base config files that are used throughout the actual boilerplate projects. Its package.json contains build scripts that are meant as references when creating your own or customizing those within the boilerplates.

There is another file I'm maintaining called Weird Facts, which is a collection of interesting things that I feel I might forget.