typescript-react-asteroid-meteor | Sustainable, Large Scale, Meteor-Independent

Made with asteroid (ddp), create-react-app, typescript, react, and meteor

---

Contributing

Before contributing at least read the Commitizen_Semantics.md documentation.

RTFM

.
├── /docs/                                      # Documentation for contributing to the repo
    └── /CLI_Config.md                          # Setting up CLI (git, npm, bash, brew, etc.)
    └── /Commitizen_Semantics.md                # Commitizen (contribution) specific terminology
    └── /Semantics.md                           # General terminology for the project/repo
└── /client
    └── /docs/                                  # Client development documentation
        ├── /Asteroid_juliancwirko_README.md    #
        ├── /Chrome_DevelopmentProfile.md       #
        ├── /CreateReactApp_README.md           #
        ├── /React_Modular_Component_Design.md  #
        ├── /ReactUnitTesting_EnzymeJest.md     #
        └── /TSLint_README.md                   #

Commitizen

This repository uses 'commitizen', start a commit with

$ npm run commit
npm run git-cz

Precommit Hook

Before a commit is saved, the precommit script will run, for example: "precommit": "npm run test" which will run the test script.

You can skip the precommit hook from running by passing --no-verify to commit like :

$ npm run commit --no-verify # like git commit --no-verify
npm run git-cz --no-verify

Client (Node) & Server (Meteor) Architecture

This application is architected so the Frontend operates completely independently from the backend.

File Structure

.
├── /.vscode/                   # IDE configuration and typing build directory
├── /client/                    # Client-side (frontend) development
    ├── /.vscode/               # IDE configuration
    ├── /config/                # Webpack, Jest, polyfills, and misc.
    ├── /coverage/              # generated by npm run test:coverage
    ├── /docs/                  # Docs for Frontend development (related to client side libraries)
    ├── /public/                # Static files which are copied into the /build/public folder
    ├── /scripts/               # Commands for build/start/test
    ├── /src/                   # The source code of the application
        ├── /config/            # Configuration of asteroid and other libraries
        ├── /components/        # App specific components which shouldn't be extracted to "abs"
        ├── /data/              # Asteroid (or GraphQL) subscriptions and collection calls
        ├── /routes/            # Page/screen components along with the routing information
        └── ...                 # Other core framework modules
    ├── /typings/               # The source code of the application
    ├── .gitignore              # Client .gitignore (use this except for extractable modules)
    ├── package-lock.json       # Fixed versions of all the dependencies
    ├── package.json            # List of 3rd party NPM libraries and utilities
    ├── tsconfig.json           # TypeScript compilerOptions and  other settings
    ├── tsconfig.test.json      # TypeScript settings for test runner
    └── tslint.json             # TSLint settings

├── /server/                    # Server-side (backend) development
    ├── /.meteor/               # Meteor's configuration and build directory
        └── /packages           # Atmosophere (Meteor 3rd Party) libraries and utilities
    ├── /.vscode/               # IDE configuration and typing build directory
    ├── /docs/                  # Docs for Backend development (related to server side libraries)
    ├── /imports/               # (meteor doesn't lazy load this directory)
        ├── /data/              # publications & methods
        ├── /startup/           # Server config: accounts, register-apis, fixtures
    ├── /node_modules/          # Meteor's 3rd-party libraries and utilities
    └── /server/                # Meteor's Server-side only hooks
    ├── .gitignore              # Server .gitignore (use this except for extractable modules)
    ├── package-lock.json       # Fixed versions of all the dependencies
    ├── package.json            # List of 3rd party NPM libraries and utilities
    └── eslint.json             # ESLint settings

├── .gitignore                  # Global .gitignore (use this except for extractable modules)
├── LICENSE                     # Repository License
├── package-lock.json           # Fixed versions of all the dependencies
└── package.json                # Repository info. and commit scripts

Motivation

As long as Meteor bundles isobuild and doesn't give a route for using webpack, there will be a need to leave Meteor's "unified" approach to development. And for the more sophisticated developers - this is probably the more sustainable way to go, if you're even still using Meteor...

For the sake of PostCSS (this time)

My specific motivation for seeking a Meteor offramp is b/c the community implementation of PostCSS for Isobuild is no longer maintained or working. I would recommend against anyone using LESS & SCSS for react development when there is PostCSS. PostCSS is modular, its where the community is, and its growing. Finally, I'm starting a new react application that should be built as independent from Meteor as possible; therefore why make a bunch of frontend code that uses Meteor's Isobuild for generating CSS assets when one day I'm definitely going to use PostCSS anyways and that will require (possible large) refactor from Meteor's LESS/SCSS to PostCSS.

In this new "asteroid" client/server world waht does Meteor do? What its great at (not frontend stuff), but providing a DDP connection to MongoDB for reactive (real-time)applications.

Based on Asteroid example: "juliancwirko/react-redux-webpack-meteor"

the INIT commit is a clone of juliancwirko/react-redux-webpack-meteor

Features

• webpack2 (via create-react-app)
• asteroid connection to meteor as ddp server
• typescript config'd
• tslint config'd
• react-router
• redux
• react-router-redux
• Kea Redux

Coming Soon

• tasklist module w/ unit testing
• local npm modules for large scale ui development
• meteor (/server) testing w/ Chimp
• Jest unit testing w/ snapshots