Introduction

In today's complex web applications, creating a well-organized and maintainable codebase is crucial. Enter Turbo Repo, a powerful tool that streamlines project management and accelerates build times for JavaScript and TypeScript projects. This post will guide you through bootstrapping a robust front-end ecosystem using Turbo Repo. We'll establish the foundation for your application by setting up the folder structure, enabling inter-package connectivity, and ensuring a clean environment.

Setting Up a Solid Structure

1. Turbo Repo Initialization: We'll follow the official Turbo Repo getting started guide for a smooth setup: Link to Turbo Repo getting started documentation.

2. Web App Refactoring and Cleanup: The default Turbo Repo setup includes a landing page and associated assets. Since these are unnecessary for our project, we'll remove them, leaving a clean src folder. To establish a consistent styling foundation, we'll incorporate a global CSS reset using Meyerweb's handy reset tool: Link to Meyerweb CSS reset.

3. Introducing the api-definition Package: Next, we'll introduce a new package named api-definition within package.json. This package will act as the central hub for defining all our API request structures, ensuring consistency and maintainability. We'll delve deeper into its functionalities in the next post.

4. UI Package Setup: The default setup includes a UI library package named UI. We'll rename it to ui-components and remove any unnecessary sample components. An index file will be added to the src folder to export all essential UI components. Furthermore, we'll include the api-def package as a dependency for ui-components, given its extensive usage within the UI components themselves. Finally, to streamline import paths within the package, we'll create a global alias name.

Conclusion

This post has established a solid foundation for your Turbo Repo project. We've set up the essential folder structure, configured inter-package connectivity, ensured a clean environment, and introduced the api-definition package. In the next post, we'll delve deeper into setting up and utilizing this crucial package – the backbone of well-defined API interactions within your application.

Note: Throughout this process, we've referred to existing configuration files like tsconfig.json and .eslintrc.js for clarity. The code snippets for these files are intentionally omitted to avoid overloading this post. However, future posts may provide detailed explanations of these configurations for a comprehensive understanding.

By following these steps and exploring the functionalities of Turbo Repo, you'll be well on your way to developing a robust and well-structured front-end ecosystem. Stay tuned for the next post where we'll dive into the api-definition package!

Below is the implementation Pull Request:
https://github.com/santhanam87/react-jam-stack/pull/1