This is the mono repo for workspace-starter.
Most subfolders contain workspaces:
- app
- assets
- lib
- playground
- services
Other folders:
- node_modules (the root node modules folder holds most of the libraries)
- workspaces (holds configs for launching vscode workspaces without the clutter, add your own configs to your liking)
Import files in root:
- .babel.rc: holds configuration for transpiling es6+ to es5
- .env.js: this is where you would put your secrets
- .eslintrc: config for linting javascript (vscode plugin hooks into this)
- .gitignore: ignore files according to glob pattern
- jest.config.js: holds config for jest test runner
- nodemon.json: holds config for nodemon (restarts node servers based on config)
- package.json: information about workspace
- README.md: main doc file
- tsconfig.json: main typescript configuration
- tsconfig.test.json: main typescript configuration for tests
- tslint.json: linting config for typescript
- typings.d.ts: general types
- yarn.lock: yarn manages file
Files found in workspaces root:
- webpack.*: tells webpack how to bundle your js
- dev.js: starts dev server (loads in dev webpack config)
- jsconfig.json: sets up vscode correctly
- tsconfig.json: sets up typescript
- tsconfig.test.json: sets up typescript test config
- jest.config.js: sets up jest config for testing
- package.json: primarily used for start scripts and dependency management
- nodemon.json: sets up nodemon for automated restarting of script file
This is where the parts of the applications live that can be consider visual applications. Eg:
- homepage
- react native mobile app
- desktop app
- web-app
This is where your media files would be placed. General stuff in main, other in relevant folder name. (eg assets/home for homepage images)
Where everything considered constant strings should be placed.
Where most of the functionality will live. Place everything that is considered a library of handy and reusable here.
- api: api related code, for frontend
- atoms: Our base component. Must generally export one element with styling attached.
- bootstrap: Congiruation files for react, redux and webpack
- componoents: Place all ui components here
- domain: Place all domain related code here
- env: Place all environment related code here
- providers: Place all providers here (providers encapsulate functionality in components)
- theme: Place styling related code here (that dont fit the usual atom or are styling utility)
- tools: General tools for development
- utils: All utility modules (eg: nifty array functions)
Where we experiment, we will usually start development here and promote to relevant workspace
Where our servers or serverless code lives.
Usually we add an entry into the package.json script file. This entry should hold all the the terminal commands needed to start whatever process you want.
Eg: to run the template:
- cd into the right workspace:
cd playground/template
- start the npm script:
yarn dev
this will lookup package json and find the dev script and run the commands in it
If starting an visual app:
- copy over playground/template into playground/yourname
- change name of module in package.json
- start developing your code
- promote it to the correct workspace
For services:
- copy over playground/template-backend into playground/yourname
- change name of module in package.json
- start developing your code
- promote it to the correct workspace
*A note about packages: when adding packages, the standard
yarn add
command will not work! You specifically have to say for which workspace:yarn add workspace-name package-name
and add a-D
flag if its for develoment yarn will manage the package.json dependency entries and node_modules folders for us
- webpack config reads entry file and gathers all related files and modules
- typescript transpiles typescript files into js
- babel transpiles es6+ code into es5
- webpack spits out a bundle
- we consume the bundle
- comonent testing:
- in lib/atoms/sample, check out the jest config, typescript config and package.json as well
- example react app (routing, redux):
- in app/example
- example node.js server
- in lib/tools/devServer