Getting Start with M2 Stack #

Introduction #

Basic Setup #

Clone the M2 Stack repository.

Run yarn install in the root directory.

Please note that some apps/services require additional setup steps that are described in their respective sections.

Directory Structure #

The M2 Stack main repository directory structure is as follows:

apps/
  electron-app/
  express-app/
  nextjs-app/
  nextjs-13-app/
  vite-app/
  vite-plugin-ssr-app/
  vite-ssr-app/
components/
  app-ui/
  app-ui-themed/
configs/
  eslint/
  jest-presets/
  prettier/
  tsconfig/
docs/
  codedoc-app/
  ladle-app/
  storybook-app/
  vitepress-app/
packages/
  deputils/
  logger/
scripts/
  git-subtree/
services/
  firebase-service/
  pocketbase-service/
  trpc-service/
src/
  docs/

Using the M2 Stack #

The M2 Stack is a monorepo that contains multiple apps and services. To run a specific app or service, navigate to the app or service directory and run the yarn dev command to preview and to experiement with the specific app or service.

• Update package.json name When you decide which apps and services you want to use, copy the app or service directory and modify the package.json and replace the name field with something like m2-site or alternative branding/name that fits your project.

• Remove package.json repository field.

• Update package.json PORT field to any available port - recommended port number for customized M2 apps is 19001 and above. Read more about M2 Stack Ports.

It's not recommended to use the boilerplate directories for various reasons. The boilerplate directories are meant to be used as a starting point for your project.

Once your project becomes stable, you can remove the boilerplate directories that are not used altogether (recommended actually to avoid clutter and confusion).

Repositories #

M2 Stack is built from multiple repositories. The main repository is the M2 Stack repository. The other repositories are the apps and services that are used in the M2 Stack.

We recommend using a similar approach for your project in case your monorepo contains multiple apps and services to better organize your project. This provides you with the potential of using the apps and services in other projects as well.

The M2 Stack main repository uses Git Subtrees to manage the apps and services. This approach is used to avoid the need to use Git Submodules. Git Subtrees are easier to manage and work with in certain cases.

Apps #

Electron App #

Electron is a popular and awesome solution for running NodeJS and Javascript (or Typescript) apps as desktop apps.

Express App #

Express is a popular solution for running NodeJS and Javascript (or Typescript) apps as server apps.

Next.js v12 & v13 #

Next.js is a popular SSR framework for React.

Vite App #

Vite is a popular tooling for building modern web apps.

Vite SSR Plugin #

Vite Plugin SSR is a popular SSR framework for Vite similar to Next.js.

Vite SSR App #

Vite SSR is a boilerplate for building SSR apps with Vite.