File System and Structure

General overview of PixelOven's file structure and recommended application structure for projects using our CLI.

File structure

The structure of this application should be considered living. As new requirements are needed this structure should be able to adapt to change. With that said there was a fair attempt to plan for the future. Below is a quick break down of this structure.

./
├── .github/
├── apps/
│ ├── examples/
│ └── pixeloven/
├── docker/
├── docusaurus/
├── node_modules/
├── packages/
│ ├── examples/
│ ├── pixeloven/
│ ├── pixeloven-core/
│ ├── pixeloven-express/
│ ├── pixeloven-react/
│ ├── pixeloven-storybook/
│ └── pixeloven-webpack/
└── scripts/
...

PixelOven Root structure

DirectoryDescription
.githubGitHub configuration
appsWorkspace for all applications including examples.
dockerDocker setup files for custom images
docusaurusGeneral documentation for PixelOven and recommended best practices for using our CLI
node_modulesI would hope this is understood ;) but this is also a transient directory used to store our general dependencies.
packagesWorkspace for all packages including examples.
scriptsScripts used to help onboarding as well as our build process.

PixelOven App structure

DirectoryDescription
examplesWorkspace for example applications to help with onboarding and testing.
pixelovenWorkspace for PixelOven sites and apps.

PixelOven Package structure

DirectoryDescription
examplesWorkspace for example packages to help with onboarding, testing and abstracting common example logic.
pixelovenWorkspace for core CLI implementation.
pixeloven-coreWorkspace for core logic common to any project
pixeloven-expressWorkspace express abstractions to help support server based applications including our own dev server.
pixeloven-reactWorkspace react abstractions for common react development
pixeloven-storybookWorkspace for storybook CLI logic
pixeloven-webpackWorkspace for webpack CLI logic

File extensions

It should be noted that we use both .ts and .tsx. The general rule is any file that has JSX should use the .tsx extension. Everything else should be .ts. The .js and .jsx extensions are not supported as this is a pure TypeScript environment.

File designations

Beyond just the above extensions we have a few other designations. First we have .stories.tsx which allow us to render out components in isolation. Second we have .test.tsx which are part of our unit testing environment. Both of these designations are matched by pattern and should be present for all components.

Last updated on by Brian Gebel