Giter VIP home page Giter VIP logo

tsdx-monorepo's Introduction

TSDX Monorepo Example/Playground

If you are here, you should checkout https://turborepo.com. It's roughly 2-5x faster than this monorepo thanks to Turborepo's intelligent (remote) caching, task scheduling, and incremental execution.

Usage

This monorepo is setup for a dummy @thefakeorg/ NPM organization. There are 2 packages by default:

  • @thefakeorg/react - A placholder React component
  • @thefakeorg/utils - A utils packages

Unlike other TSDX templates, the developer experience for this template is currently a bit more manual.

Your first order of business will be to search and replace @thefakeorg for the npm organization of your own.

After that you can install all the dependencies in the root directory. Since the monorepo uses Lerna and Yarn Workspaces, npm CLI is not supported (only yarn).

yarn install

This will install all dependencies in each project, build them, and symlink them via Lerna

Development workflow

In one terminal, run tsdx watch in parallel:

yarn start

This builds each package to <packages>/<package>/dist and runs the project in watch mode so any edits you save inside <packages>/<package>/src cause a rebuild to <packages>/<package>/dist. The results will stream to to the terminal.

Using the example/playground

You can play with local packages in the Parcel-powered example/playground.

yarn start:app

This will start the example/playground on localhost:1234. If you have lerna running watch in parallel mode in one terminal, and then you run parcel, your playground will hot reload when you make changes to any imported module whose source is inside of packages/*/src/*. Note that to accomplish this, each package's start command passes TDSX the --noClean flag. This prevents Parcel from exploding between rebuilds because of File Not Found errors.

Important Safety Tip: When adding/altering packages in the playground, use alias object in package.json. This will tell Parcel to resolve them to the filesystem instead of trying to install the package from NPM. It also fixes duplicate React errors you may run into.

Running Cypress

(In a third terminal) you can run Cypress and it will run your integration tests against the playground/example. If you want to keep integration tests and examples seperate you can copy the example folder to another folder called like app or whatever. Cypress will look for localhost:1234 by default. If you change ports, also make sure to update .github/integration.yaml as well.

tsdx-monorepo's People

Contributors

jaredpalmer avatar github-actions[bot] avatar lecstor avatar

Stargazers

liujie avatar Mario Duarte avatar avatar Kasey Cantu avatar avatar Wilson Gichu avatar Katy Rumble avatar Will avatar avatar Ciaran Liedeman avatar Alexandre Marques avatar Madhav Jha avatar Anton Pretorius avatar Barry Buck avatar Alexey Poryadin avatar kyungtae Moon avatar Andrew Li avatar Oliver Belmont avatar Nikita avatar Lionel Tzatzkin avatar Yony Calsin avatar Keenan Jaenicke avatar Omri Mor avatar Adrian Lumpe avatar avatar Cat avatar Leonardo "Alemax" Fonseca Ferreira avatar Spencer Schoeben avatar avatar Mat Warger avatar Peter Siska avatar Andres Alvarez avatar Dashon 'DJ' Hawkins avatar Marcelo Cardoso avatar Michael Wills avatar avatar Gab Labelle avatar YoungJin Kang avatar Deok0_0 avatar Minoah avatar DJ avatar Chanhee Jang avatar Suraj Verma avatar Jbee avatar Conor Sinclair avatar Here we goal avatar Abel avatar Mikhail Nathaniel Abordo avatar avatar avatar Eric Chernuka avatar Jake Jordan avatar sanjeev kumar avatar Indra avatar TD Mackey avatar Bryan Veloso avatar Øyvind Marthinsen avatar Sebastian Nemeth avatar Mitchell McKenna avatar Washington Soares avatar Luís Takahashi avatar Roman Hossain Shaon avatar Andrejs Agejevs avatar Nick Hehr avatar Eunsoo Lee avatar Florian Nagel avatar ryan martin avatar Tony Tang avatar Caspar Due avatar Felix Hungenberg avatar Perevezentsev Pavel avatar António Santos avatar Radoslav Oleksak avatar Juho Jokela avatar Erik Taheri avatar Jason H avatar Sergey Shcherba avatar Eugene avatar Jibin Thomas avatar Thanh Pham avatar avatar Mike Darche avatar Håkon Krogh avatar avatar Marco Ludovico Perego avatar jfplataroti avatar Gabriel Tibúrcio avatar Muhwezi Deo avatar Igor Nesterenko avatar Muhammad Farid Zia avatar Thanh T.Vo avatar Son Tran avatar Nhat Toan avatar Hgonagy avatar Thorsten Lünborg avatar Winston Fassett avatar Ahmed Rizwan avatar Porramate Lim avatar Paul van Dyk avatar 波比小金刚 avatar

Watchers

James Cloos avatar Sérgio A. Kopplin avatar Gabriel Tibúrcio avatar Moc Thanh An avatar Andrey Barinov avatar avatar

Forkers

bahmutov lecstor akadop daines-io tibuurcio wangjacker lisgking zautke hervera

tsdx-monorepo's Issues

on `yarn start:app`, semver throws `Invalid Version: undefined`

Thanks for making this - seems like it is exactly what I need!

I followed the instructions in the readme to run the unmodified repo, and got an error from semver when trying to run yarn start:app:

 /tsdx-monorepo/example/index.tsx: Invalid Version: undefined
 at new SemVer (/tsdx-monorepo/example/node_modules/semver/semver.js:314:11)

I get the same result in Windows and WSL.

full bash output 
/mnt/c/git/jaredpalmer/tsdx-monorepo
⚡ yarn start:app
yarn run v1.22.4
$ yarn run build && yarn --cwd example && yarn --cwd example start
$ lerna run build
lerna notice cli v3.22.1
lerna info Executing command in 2 packages: "yarn run build"
lerna info run Ran npm script 'build' in '@thefakeorg/utils' in 5.6s:
$ tsdx build --tsconfig tsconfig.build.json
✓ Creating entry file 1.1 secs
✓ Building modules 2.9 secs
lerna info run Ran npm script 'build' in '@thefakeorg/react' in 5.8s:
$ tsdx build --tsconfig tsconfig.build.json
✓ Creating entry file 1.1 secs
✓ Building modules 3 secs
lerna success run Ran npm script 'build' in 2 packages in 11.4s:
lerna success - @thefakeorg/react
lerna success - @thefakeorg/utils
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ parcel index.html
Server running at http://localhost:1234
🚨  /mnt/c/git/jaredpalmer/tsdx-monorepo/example/index.tsx: Invalid Version: undefined
    at new SemVer (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/semver/semver.js:314:11)
    at compare (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/semver/semver.js:647:10)
    at lt (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/semver/semver.js:688:10)
    at /mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/@babel/preset-env/lib/index.js:276:22
    at Object.default (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/@babel/helper-plugin-utils/lib/index.js:22:12)
    at getEnvPlugins (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/parcel/src/transforms/babel/env.js:62:34)
    at getEnvConfig (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/parcel/src/transforms/babel/env.js:12:25)
    at async getBabelConfig (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/parcel/src/transforms/babel/config.js:32:19)
    at async babelTransform (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/parcel/src/transforms/babel/transform.js:6:16)
    at async JSAsset.pretransform (/mnt/c/git/jaredpalmer/tsdx-monorepo/example/node_modules/parcel/src/assets/JSAsset.js:83:5)`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.