Skip to content

2-structure.md

Latest commit

 

History

History
88 lines (57 loc) · 3.56 KB

2-structure.md

File metadata and controls

88 lines (57 loc) · 3.56 KB

🕮 Table of contents

🦚 Getting Started:

2. Paon Project Structure

Quick overview of the important folder and files in a Paon project, and the default structure of a site folder.

Global structure

ℹ️ For simpicity, we are only going to talk about the files and folders that are relevant.

  • src/
    Folder containing all the frontend logic

    • core/
      Contains scripts & assets necessary for the default Paon site structure (rendering function, structural components, routing...)

    • shared/
      Shared folder, where we can store common ressources for multiple registered sites

    • sites/
      Each registered website gets a folder here that contains all its frontend logic

    • ...

  • dist/
    Folder containing the compiled scripts and bundled assets for all registered websites in the project

    • client/assets/
      This folder contains all the client assets for all built websites

      In production, the content of this folder should be served for any request under the /assets/... path, for any of the registered websites (Paon prod server does not serve static assets).

    • ...

  • paon/

    • server.config.json
      By default, the server listens on port 3000 and only allows loopback traffic (only listens to requests from localhost).

    • ...

  • ...

Site Folder Structure and Conventions

The site folder is scaffolded in src/sites/ when we run the add:site command.

ℹ️ In this guide, we are going to use the default site structure provided when creating a new site.
However, using the default site structure is optional If you wish to create your own structure you can modify entry-server.tsx, entry-client.tsx or app.tsx to render you own component tree.

📁 Folder Convensions

Folders Description
api/ API Fetching functions
assets/ Static assets
components/ React Components
hooks/ React Hooks
pages/ Page components

📄 Structural Files

Those are core files in the default site structure, they have to be handled with care otherwise they might break the site.

Files Description
entry-client.tsx Script executed client side to set up the app
entry-server.tsx Exports the render function in charge of performing the server side rendering of the app
index.html Entry point when rendering any page (CSR or SSR)
app.tsx Defines the root App component of the application
site.config.json Site specific configuration

📄 Routing Files

Files Description
layout.tsx Layout component
error.tsx Error component
loader.tsx Loading component
router.tsx Defines routes, and routing settings settings

⬅️ Installation & setup Build a basic backend for the demo site ➡️