Skip to main content

App structure

The Node template for Riseact applications is designed to be flexible and adaptable to different types of projects. It provides a basic structure for the application, but you can customize it to your needs.

Basic structure​

The basic structure of a Riseact application is as follows:

├── client
│   ├── index.html
│   ├── LICENSE
│   ├── package.json
│   ├── public
│   │   └── riseact.png
│   ├── src
│   │   ├── assets
│   │   │   └── react.svg
│   │   ├── components
│   │   │   ├── Navbar
│   │   │   │   ├── index.tsx
│   │   │   │   └── NavButton.tsx
│   │   │   └── Page
│   │   │       └── index.tsx
│   │   ├── config
│   │   │   ├── network.ts
│   │   │   └── routing.ts
│   │   ├── hooks
│   │   │   └── useOrganization.ts
│   │   ├── main.tsx
│   │   ├── Router.tsx
│   │   ├── routes
│   │   │   ├── Campaigns
│   │   │   │   ├── Create.tsx
│   │   │   │   ├── Detail.tsx
│   │   │   │   ├── Form.tsx
│   │   │   │   ├── index.tsx
│   │   │   │   └── List
│   │   │   │       ├── Filters.tsx
│   │   │   │       ├── index.tsx
│   │   │   │       └── VisibilityBadge.tsx
│   │   │   └── Home
│   │   │       └── index.tsx
│   │   ├── utils
│   │   │   └── enumTranslate.ts
│   │   └── vite-env.d.ts
│   ├── tsconfig.json
│   └── vite.config.ts
├── common
│   ├── gql-codegen.ts
│   ├── package.json
│   ├── src
│   │   ├── gql
│   │   │   ├── fragment-masking.ts
│   │   │   ├── gql.ts
│   │   │   ├── graphql.ts
│   │   │   └── index.ts
│   │   ├── queries.ts
│   │   └── types.ts
│   └── tsconfig.json
├── Dockerfile
├── LICENSE
├── package.json
├── package-lock.json
├── prisma
│   ├── migrations
│   │   ├── 20231031142218_init
│   │   │   └── migration.sql
│   │   └── migration_lock.toml
│   └── schema.prisma
├── README.md
├── server
│   ├── package.json
│   ├── src
│   │   ├── config
│   │   │   ├── database.ts
│   │   │   └── riseact.ts
│   │   ├── controllers
│   │   │   └── organization.ts
│   │   ├── env.d.ts
│   │   └── index.ts
│   └── tsconfig.json
├── tsconfig.build.json
└── tsconfig.json

Client​

The client folder contains the front-end application code. This folder is structured to separate components, pages, hooks, and utilities into separate folders.

  • index.html: the application's main HTML file
  • package.json: project configuration file
  • public: folder containing the application's static files
  • src: folder containing the application's source code
    • assets: folder containing media files
    • components: folder containing the application's components
    • config: folder containing configuration files
    • hooks: folder containing custom hooks
    • main.tsx: the application's main file
    • Router.tsx: file containing the route definitions
    • routes: folder containing the application's pages
    • utils: folder containing utilities

Common​

The common folder contains code shared between the client and the server. This folder is structured to separate GraphQL queries, types, and configuration files.

  • gql-codegen.ts: configuration file for GraphQL type generation
  • package.json: project configuration file
  • src: folder containing the shared source code
    • gql: folder containing the GraphQL files
    • queries.ts: file containing the GraphQL queries
    • types.ts: file containing the TypeScript types

Server​

The server folder contains the back-end application code. This folder is structured to separate controllers, configuration files, and environment files.

  • package.json: project configuration file
  • src: folder containing the application's source code
    • config: folder containing configuration files
    • controllers: folder containing the application's controllers
    • env.d.ts: type definition file for environment variables
    • index.ts: the application's main file

Other files​

  • Dockerfile: configuration file for building the Docker image
  • LICENSE: the project's license file
  • package.json: project configuration file
  • package-lock.json: dependency lock file
  • prisma: folder containing Prisma configuration files
  • README.md: project description file
  • tsconfig.build.json: configuration file for compiling the project
  • tsconfig.json: the project's TypeScript configuration file