v1.0.0

.eslintignore

@@ -0,0 +1,6 @@
+build/
+coverage/
+dist/
+flow-typed/
+playwright-report/
+ljas-webpack/docs/

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+    env: {
+        es2024: true,
+        node: true,
+    },
+    extends: ['eslint:recommended', 'prettier'],
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    root: true,
+    rules: {},
+    overrides: [],
+}

.gitignore

@@ -1,8 +1 @@
-build/
-coverage/
-flow-typed/
 node_modules/
-.eslintcache
-*.sublime-workspace
-stats.*.json
-yarn-error.log

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+    process.exit(0)
+}
+const husky = (await import('husky')).default
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint-staged

.lintstagedrc

@@ -0,0 +1 @@
+{ "*": "prettier --ignore-unknown --write", "*.{js,jsx,ts,tsx}": "eslint" }

.prettierignore

@@ -0,0 +1,9 @@
+build/
+coverage/
+dist/
+flow-typed/
+playwright-report/
+test-results/
+ljas-webpack/docs/
+*.sublime-workspace
+package-lock.json

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 4
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

CHANGELOG.md

@@ -0,0 +1,42 @@
+## 1.0.0
+
+-   Introduce Docker dev environments for all projects except for Electron-based projects
+-   Introduce PostgreSQL support with new Express + PostgreSQL starters: `express-postgres` & `react-express-postgres-ssr`
+-   Introduce dotenv ^16.4.5
+-   Introduce Mock Service Worker ^2.2.2
+-   Introduce Prettier 3.2.5
+-   Introduce Prisma ^4.15.0
+-   Introduce Playwright ^1.44.0
+-   Introduce `electron-icon-maker` ^0.0.5
+-   Replace Enzyme with React Testing Library ^14.2.1
+-   Add DOM Testing Library ^9.3.4 for non-React frontend projects
+-   Replace Flow and PropTypes with TypeScript ~5.3.3
+-   Replace React Hot Loader with React Refresh ^0.14.0
+-   Replace Sublime Text support with Visual Studio support
+-   Drop support for Yarn
+-   Upgrade Babel to ^7.22.1
+-   Upgrade Electron to 29.1.0
+-   Upgrade ESLint to ^8.41.0
+-   Upgrade Express to ^4.18.2
+-   Upgrade Jest to ^29.5.0
+-   Upgrade Node.js to ^20.9.0
+-   Upgrade React to ^18.2.0
+-   Upgrade SuperTest to ^6.3.3
+-   Upgrade Stylelint to ^16.2.1
+-   Upgrade webpack to ^5.85.0
+-   Separate asset test and counter from `browser` project into its own examples: `asset-test` & `counter-react`
+-   Replace Node Sass with Dart Sass ~1.64.2 for `counter-react`
+-   Rewrite \*chan from `nodejs-ssr` project into its own `starchan` example
+-   Upgrade `react-redux` to ^8.1.3 for `starchan`
+-   Setup Redux Toolkit ^1.9.6 for `starchan`
+-   Upgrade React Router to ^6.16.0 for `starchan`
+-   Port `todolist-browser` project as `todo-list` example
+-   Create new vanilla JavaScript starter for browsers: `basic-browser`
+-   Create new vanilla JavaScript starter for desktops: `basic-electron`
+-   Create new vanilla JavaScript starter for Node.js: `basic-node`
+-   Create new Express + MongoDB starter: `express-mongo`
+-   Create new React starter for browsers: `react-browser`
+-   Create new React starter for desktops: `react-electron`
+-   Create new React + Express + MongoDB server-side rendering starter: `react-express-mongo-ssr`
+-   Create new desktop app example: `markdown-editor`
+-   Create new Express + PostgreSQL example: `notes-api`

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2019 Matthew Lean
+Copyright (c) 2018–present Matthew Lean
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docs/README.md

@@ -1,33 +1,75 @@
-# Lean JavaScript Application Starter Documentation
+# LJAS Documentation
+
+Welcome to the documentation for **Lean JS App Starter (LJAS)**!
+
 ## Table of Contents
-* [Read Me](../README.md)
-* [Motivation](motivation.md)
-* [Getting Started](getting_started.md)
-* [JavaScript Features](javascript_features.md)
-* [Environments](envs/README.md)
-  * [Web Browser](envs/browser/README.md)
-    * [Getting Started](envs/browser/getting_started.md)
-    * [Developing](envs/browser/developing.md)
-    * [Building](envs/browser/building.md)
-    * [Dependencies](envs/browser/dependencies.md)
-    * [Configuration](envs/browser/configuration.md)
-    * [Examples](envs/browser/examples.md)
-  * [Node.js](envs/nodejs/README.md)
-    * [Node.js](envs/nodejs/nodejs/README.md)
-      * [Getting Started](envs/nodejs/nodejs/getting_started.md)
-      * [Developing](envs/nodejs/nodejs/developing.md)
-      * [Building](envs/nodejs/nodejs/building.md)
-      * [Dependencies](envs/nodejs/nodejs/dependencies.md)
-      * [Configuration](envs/nodejs/nodejs/configuration.md)
-      * [Examples](envs/nodejs/nodejs/examples.md)
-  * [Desktop](envs/desktop/README.md)
-    * [Getting Started](envs/desktop/getting_started.md)
-    * [Developing](envs/desktop/developing.md)
-    * [Building](envs/desktop/building.md)
-    * [Dependencies](envs/desktop/dependencies.md)
-    * [Configuration](envs/desktop/configuration.md)
-    * [Examples](envs/desktop/examples.md)
-* [Tools](tools/README.md)
-  * [Postman](tools/postman.md)
-  * [Sublime Text](tools/sublime_text.md)
-* [Resources](resources.md)
+
+### [Motivation](./motivation.md)
+
+_Find out why you should consider using LJAS for your project._
+
+---
+
+### Setup
+
+_How to setup LJAS and start your project._
+
+-   [Getting Started](./setup/getting-started.md)
+-   [Code Editors](./setup/code-editors.md)
+-   [Git Pre-Commit Hooks](./setup/git-pre-commit-hooks.md)
+
+---
+
+### **Developing**
+
+_How to develop with LJAS._
+
+-   [JavaScript & TypeScript](./developing/javascript-typescript.md)
+-   [Styling](./developing/styling.md)
+-   [Databases](./developing/databases/README.md)
+-   [Testing](./developing/testing.md)
+-   [Debugging](./developing/debugging.md)
+-   [Package Management](./developing/package-management.md)
+-   [React Server-Side Rendering](./developing/react-ssr.md)
+-   [Docker Environments](./developing/docker-environments.md)
+
+---
+
+### [**Building**](./building.md)
+
+_How the build process works and how to create builds for production._
+
+---
+
+### **Configuration**
+
+_How the default configurations work and how to customize them._
+
+-   [`.env` File](./configuration/dotenv-file.md)
+-   [Babel](./configuration/babel.md)
+-   [Browserslist](./configuration/browserslist.md)
+-   [Docker](./configuration/docker.md)
+-   [electron-builder](./configuration/electron-builder.md)
+-   [ESLint](./configuration/eslint.md)
+-   [Husky & lint-staged](./configuration/husky-lint-staged.md)
+-   [Jest](./configuration/jest.md)
+-   [nodemon](./configuration/nodemon.md)
+-   [Playwright](./configuration/playwright.md)
+-   [Prettier](./configuration/prettier.md)
+-   [Prisma](./configuration/prisma.md)
+-   [Stylelint](./configuration/stylelint.md)
+-   [TypeScript](./configuration/typescript.md)
+-   [Visual Studio Code](./configuration/vscode.md)
+-   [webpack](./configuration/webpack.md)
+
+---
+
+### [**Frequently Asked Questions**](./faq.md)
+
+_Answers to common questions that don't really fit anywhere else in the docs._
+
+---
+
+### [**Origins**](./origins.md)
+
+_The history of Lean JS App Starter._

docs/building.md

@@ -0,0 +1,124 @@
+# Building
+
+## Contents
+
+-   [Overview](#overview)
+-   [Why use webpack still?](#why-use-webpack-still)
+-   [webpack Build Scripts](#webpack-build-scripts)
+-   [Build Targets](#build-targets)
+-   [Building Distributable Applications for Electron](#building-distributable-applications-for-electron)
+-   [Building Icons for Electron Applications](#building-icons-for-electron-applications)
+-   [Debugging the webpack Build Process](#debugging-the-wepback-build-process)
+-   [Troubleshooting](#troubleshooting)
+
+## Overview
+
+[webpack](https://webpack.js.org) is the core of the build process for all LJAS projects. When you run a `build` `package.json` script, it will start a webpack process which pull along other tools it needs as it progresses. When the build process is complete, it will produce the build files in the `build/` directory.
+
+When working with Electron-based projects, an additional step must be done to produce the distributable apps. This is explained in more detail in the ["Building Distributable Applications for Electron" section](#building-distributable-applications-for-electron).
+
+## Why use webpack still?
+
+At the time of writing, webpack is starting to fall out of fashion, but we still believe that it remains one of the best options for a JavaScript projects. Believe it or not, the time where setting up your development environment from scratch or using [Create React App](https://create-react-app.dev) was actually not too long ago (even though it may feel like an eternity in technology time already), and during the peak of this era, webpack was the number one build tool. LJAS originally was created in this webpack-era which is one of the reasons as to why we started with it, but we still intend to keep it because we think webpack's value still justifies itself in today's ecosystem.
+
+The most popular JavaScript-based dev environment is currently [Vite](https://vitejs.dev) which is undoubtably great for getting frontend web apps off the ground quickly as it hides the complexity around working with build tools. However, webpack stands its ground because there is still a strong use case where many users need full control of their build tools and require the ability to do things beyond out-of-the-box functionality with something like Vite. While Vite does offer you to go under-the-hood and customize its [esbuild](https://esbuild.github.io) and [Rollup](https://rollupjs.org) configurations, at that point we argue that webpack becomes the superior competitor as
+it still has the most mature ecosystem that boasts an abundance of packages that can pretty much do everything you'd need along with a better selection of resources to search for and reference when compared to Vite, esbuild, and Rollup's resources.
+
+webpack is also generic so it can be used for any JavaScript project, not just frontend ones, which is how LJAS can target other platforms besides browsers. Outside of meta-frameworks, there isn't really a ubiquitous Vite or Create React App equivalent for Node.js apps. By applying webpack to Node.js, we can introduce all the bells and whistles frontend developers have been working with to the Node.js space while making non-browser projects easier for frontend developers to adjust to.
+
+## webpack Build Scripts
+
+There are several different build-related commands offered as `package.json` scripts that vary depending on which starter you're building off of, but two scripts that all projects have are:
+
+```console
+npm run build
+```
+
+Create a development build in the `build/development/` directory. This process is automatically run for you in the `npm run dev` script.
+
+---
+
+```console
+npm run build:production
+```
+
+A variant of the `build` script that creates a production build in the `build/production/` directory. This is the build you should deploy to production.
+
+---
+
+In addition to this, different starters will have other variant scripts available to you like:
+
+```console
+npm run build:debug
+```
+
+Debug the webpack build process for development builds. Learn more about debugging webpack in the ["webpack build process with Google Chrome" section in the debugging document](./developing/debugging.md#webpack-build-process-with-google-chrome).
+
+---
+
+```console
+npm run build:stats
+```
+
+Run the webpack build process for a development build and output a `stats.json` file that can be analyzed using a build analysis tool. Learn more about webpack build analysis in the ["Build Analysis" chapter from the SurviveJS webpack book](https://survivejs.com/books/webpack/optimizing/build-analysis).
+
+---
+
+You can always use `:production` in a script to control whether or not the build process should target the production environment.
+
+Starters that involve multiple webpack processes will also provide variant scripts that isolate specific ones. For example, in the [React + Express + PostgreSQL with Server-Side Rendering starter](../starters/react-express-postgres-ssr), the `build` script runs the frontend and backend webpack processes together. If you wanted to only run one of these processes, a `backend:` and `frontend:` prefix variants are available so you could run something like `npm run frontend:build` to execute the frontend webpack process by itself.
+
+## Build Targets
+
+[Browserslist](https://github.com/browserslist/browserslist) is used by multiple tools in the build process to determine what compatibility-related code should be included so the app can perform properly for the project's established build targets. Contrary to its name, Browserslist isn't just for controlling browser targets; it is used for controlling Node.js version targets as well.
+
+The following build process tools rely on Browserslist:
+
+-   [webpack](https://webpack.js.org)
+-   [Babel](https://babeljs.io)
+-   [PostCSS](https://postcss.org)
+-   [Autoprefixer](https://github.com/postcss/autoprefixer)
+
+Edit the `.browserslistrc` file in the project's root directory to change build targets. For more information on configuring Browserslist, please read the [Browserslist configuration document](./configuration/browserslist.md). Always try to define build targets as precisely as possible as it will exclude unnecessary code for irrelevant platforms and keep your build size as small as possible.
+
+When working with Electron projects, you will also need to alter the webpack targets for the main process in `webpack/main.common.js` and the preload process in `webpack/preload.common.js`.
+
+## Building Distributable Applications for Electron
+
+LJAS uses [electron-builder](https://electron.build) to build distributable apps for macOS, Windows, and Linux.
+
+Before building distributable apps, you must have an existing webpack production build, so make sure that the `build:production` `package.json` script has been run beforehand. Once that's available, run the following:
+
+```console
+npm run dist
+```
+
+This will initiate electron-builder which will use the build in the `build/production/` directory and produce a distributable app in the `dist/` directory.
+
+If you need to test the distributable app build process but you don't want to go through it completely, you can run the following script to generate the `dist/` directory without completely packaging the app:
+
+```console
+npm run pack
+```
+
+To learn how to configure electron-builder, read the [electron-builder configuration document](./configuration/electron-builder.md).
+
+## Building Icons for Electron Applications
+
+You can convert an image into icons for your app using the `make-icons` `package.json` script. This script is an alias for [`electron-icon-maker`](https://github.com/jaretburkett/electron-icon-maker).
+
+Here is an example of this script converting a `.png` file:
+
+```console
+npm run make-icons -- --input=/absolute/path/file.png --output=./relative/path/to/folder
+```
+
+## Debugging the wepback Build Process
+
+Please refer to the ["webpack Build Process with Google Chrome" section in the "Debugging" document](./developing/debugging.md#webpack-build-process-with-google-chrome).
+
+## Troubleshooting
+
+#### How do I clear babel-loader's cache?
+
+Delete the `node_modules/.cache/babel-loader` directory.

docs/configuration/babel.md

@@ -0,0 +1,18 @@
+# Babel Configuration
+
+## Overview
+
+Most projects only have one [Babel config file](https://babeljs.io/docs/config-files) found in the project's root directory as `babel.config.js`. Some projects that involve multiple build targets that require different Babel settings will have multiple config files that are named with a different suffix depending on the build target. For example, the [React + Express + PostgreSQL with Server-Side Rendering starter](../../starters/react-express-postgres-ssr) has a backend Babel config file called `babel.backend.js` and a frontend Babel config file called `babel.frontend.js`.
+
+We currently use a JavaScript configuration file over other options like `.babelrc` or `babel.config.json` as it allows us to alter the configuration dynamically during runtime based on different conditions like the environment being used.
+
+## Learning Resources
+
+The following resources are from the [Babel docs](https://babeljs.io/docs):
+
+-   [What is Babel?](https://babeljs.io/docs)  
+    Get a basic overview of what Babel does.
+-   [Usage Guide](https://babeljs.io/docs/usage)  
+    Learn the basics of configuring Babel by setting up a simple Babel configuration from scratch.
+-   [Configure Babel: JavaScript configuration files](https://babeljs.io/docs/configuration#javascript-configuration-files)  
+    Learn how to format JavaScript configuration files and how to write dynamic configuration.