Skip to main content

Overview

Welcome to the create-abyss-app landing page! This powerful tool is designed to streamline the development of complex applications by utilizing a monorepo structure to manage both frontend and backend projects seamlessly. Whether you're building a dynamic web application or a robust API, create-abyss-app equips you with the tools necessary for modern, scalable, and efficient development.

Advantages​

  • Zero Configuration Setup
    • All tools are already configured that are essential for React development. Tools like Webpack (for bundling your code) and Babel (for using modern JavaScript features).
  • Easy To Use
    • You can start developing and see those results immediately.
  • Optimized Build Output
    • Provides optimized production builds out of the box, including minification, concatenation, and efficient loading (e.g., code splitting).
  • Community and Support:
    • Many team are already using the create-abyss-app, it offers significant support, regular updates, and a large number of resources for troubleshooting.

Project structure​


An Abyss application is divided into two primary products: a frontend and a backend. This is represented as two JavaScript projects within a single monorepo. A monorepo is a software development strategy where code for many projects is stored in the same repository. We use NPM Workspaces to make it easy to operate across both projects while keeping them in a single Git repository.

The frontend project is called web and the backend project is called api. They are independent projects; the code on the web side will end up running in the user's browser while code on the API side will run on a server somewhere. The API source includes a NodeJS server which manages your business logic through GraphQL and REST endpoints. The web source includes a NextJS server which invokes your API and renders components through a React UI.

By separating these two development paradigms, you can build applications that are well-organized and able to scale to meet the needs of your business.

In addition to the web and api projects, the Abyss monorepo includes a third product called workshop. This is where Parcels are developed. Parcels are framework-agnostic components that can be seamlessly integrated as standalone features into any web application. They're constructed using React and compiled into web components, making them universally deployable.

For mobile applications, the Abyss monorepo includes a mobile product. This product is designed to be used with React Native, allowing you to build cross-platform mobile applications using the same codebase.

└── products
    ├── api
    |   ├── .abyss
    │   |   ├── environments.json
    │   |   └── settings.json
    │   ├── src
    │   |   ├── routes
    |   │   |   ├── graphql
    │   |   |   |   ├── schema
    │   |   |   |   ├── index.ts
    │   |   |   |   └── resolvers.ts
    │   |   |   ├── index.ts
    │   |   |   └── routes.ts
    │   |   ├── services
    │   |   └── server.ts
    |   └── package.json
    ├── mobile
    |    ├── android
    |    ├── ios
    |    ├── App.tsx
    |    ├── index.js
    |    └── package.json
    ├── web
    |    ├── .abyss
    |    |   ├── environments.json
    |    |   └── settings.json
    |    ├── src
    |    |   ├── common
    |    |   ├── routes
    |    |   |   ├── index.ts
    |    |   |   └── Routes.tsx
    |    |   ├── browser.tsx
    |    |   └── document.tsx
    |    └── package.json
    └── workshop
         ├── .abyss
         |   ├── environments.json
         |   └── settings.json
         ├── src
         |   ├── common
         |   ├── parcels
         |   |   ├── ReactLogo
         |   |   |     ├── index.ts
         |   |   |     ├── ParcelApp.tsx
         |   |   └─────└── ParcelApp.stories.tsx
         |   ├── decorator.tsx
         └── package.json

Removing products​

While the default template application includes these four products, you can remove any of them if they are not needed for your application. To do this, simply delete the corresponding directory from the products folder. For example, if you want to remove the mobile/ product, delete the products/mobile/ directory. This will have no impact on the other products in the monorepo, allowing you to customize your application to fit your specific needs.

Table of Contents