YARN RUN DEV SERVER CODE
The code base is structured as a monorepo containing two Yarn workspaces: cors takes care of CORS issues in local development.graphql is a peer dependency of swapi-graphql-schema and express-graphql.swapi-graphql-schema contains the GraphQL schema and resolver.express-graphql is the Express middleware for GraphQL.The back-end’s run time dependencies are: It has two peer dependencies that are included but not used directly: prop-types and graphql. graphiql provides the GraphQL interactive explorer.react and react-dom are the UI framework.The front-end’s run time dependencies are: In keeping with the purpose of this article, the demo application’s functionality is deliberately kept simple to avoid distracting from the tooling.Īll the application code is contained in only three files ( front-end/src/App.tsx, front-end/src/index.tsx and back-end/src/index.ts).Īs a believer in a minimalist approach to tooling configurations, I have made every attempt to only include the absolute minimum amount of configuration necessary for the functionality of these tools. If you want to quickly try the application out, here is the online version created by the GraphQL team. This demo application is an interactive in-browser explorer of the Star Wars API, which contains the data about all the Star Wars films, characters, spaceships and so on. To show how this setup works at a practical level, a demo JavaScript full-stack web application is included. Instead of running many configuration commands to configure the local machines’ environments (where each command can produce different results or errors due to differences between individual machines), new developers can check out the code base, run a few Docker commands that have predictable results and start developing right away in a highly uniform and controlled environment of Docker containers. The ability to develop out of Docker containers with the same ease of doing it on the host machine enables the local development environment to closely resemble the production environment, achieving dev/prod parity.īecause JavaScript dependencies and system tools needed by the app can be vendored into the Docker image and Docker Compose configurations, no implicit dependencies “leak in” from the surrounding environment.Īs an added bonus, this complete capture of all environmental dependencies ensures consistency in the development environment of current developers and simplifies the onboarding of new developers. The monorepo structure ensures that the front- and back-ends both use the same version of React to avoid hydration failure due to version mismatch.
In particular, isomorphic full-stack web applications (single-page front-end React applications that use server-side rendering and client-side hydration) that follow the 12-factor app philosophy greatly benefit from this setup. This setup facilitates the development of JavaScript monorepos, which promote a high degree of coherence and consistency between various parts of a codebase in terms of tooling, dependencies and business logic.įor example, in a library like Babel, coherence between the core processing pipeline ( input/output adapters (such as and plugins ( ensures that the entire ecosystem moves in lock step when new JavaScript language features are released.
YARN RUN DEV SERVER HOW TO
The intended audience are experienced developers who have used most of the above tools and technologies in isolation and are looking to wrangle them together.Įven though this article only discusses TypeScript/JavaScript, I’ve created another repo showing how to set up a Docker Compose-based development and debugging environment for Python using VS Code’s Remote Container Extension.īecause I’ll most likely find ways to improve this setup when I use it for my own development work and because the integration between the various tools in this setup is constantly improving, I expect to revise this article multiple times in the future. The article only provides a high-level overview because I have provided extensive commentary inside the codebase on GitHub.