As an opinionated framework, Joystick ships with a standardized file structure. This ensures that every project you build with the framework is consistent, easy-to-navigate, and internally: behavior remains stable.
While some developers prefer absolute control over their project structure, Joystick takes the stance that it's better to sacrifice some control in favor of maximum predictability (both on the developer experience side and internally on the framework side).
Files with an * asterisk after them below are required:
File Structure
├── .joystick/
├── api/ *
├── caches/
├── cron_jobs/
├── css/
├── email/ *
│ ├── base.css
│ ├── base.html
│ └── reset_password.js
├── fixtures/
├── i18n/ *
│ └── email/
├── indexes/
├── lib/ *
│ ├── browser/
│ └── node/
├── node_modules/
├── private/ *
├── public/ *
│ ├── apple-touch-icon-152x152.png
│ ├── favicon.ico
│ ├── joystick_logo.webp
│ ├── manifest.json
│ ├── service-worker.js
│ └── splash-screen-1024x1024.png
├── queues/
├── routes/
├── tests/
├── ui/ *
│ ├── components/ *
│ ├── layouts/ *
│ └── pages/ *
├── uploaders/
├── websockets/
├── workers/
├── index.client.js *
├── index.css
├── index.html *
├── index.server.js *
├── package.json
└── settings.<env>.json| Path | Required | Description |
|---|---|---|
| .joystick/ | Where Joystick stores builds of your app and data from your databases. | |
| api/ | Where the definitions for your getters and setters are defined for your app. | |
| caches/ | Where the definitions for your in-memory caches are defined for your app. | |
| cron_jobs/ | Where the definitions for cron jobs are defined for your app. | |
| css/ | Where any global stylesheets are stored for your app (in addition to the root index.css file). | |
| email/ | Where your base HTML and CSS for email templates live as well as individual templates (built with Joystick components). | |
| fixtures/ | Where your fixture function definitions live for creating test data in your app.. | |
| i18n/ | Where your translation files live for your app. | |
| indexes/ | Where your database indexes live for your app. | |
| lib/ | Where your miscallaneous "library" code lives in your app. | |
| node_modules/ | Where any NPM-installed dependencies live for your app. | |
| private/ | Where any server-side only files live for your app. | |
| public/ | Where any public file live for your app (accessible via both client and server). | |
| queues/ | Where job queue definitions live for your app. | |
| routes/ | Where you can organize larger route files for your app outside of your index.server.js file. | |
| tests/ | Where your tests live for your app. Internally, structured to match the structure of your project. | |
| ui/ | Where the components, layouts, and pages that make up your app's UI live. | |
| uploaders/ | Where your uploader definitions live for your app. | |
| websockets/ | Where your WebSocket definitions live for your app. | |
| workers/ | Where any standalone Node.js workers are stored for your app (loaded and called via the worker() method in @joystick.js/node). |
|
| index.client.js | Where any global, client-side JavaScript lives for your app (e.g., analytics tracking code). | |
| index.css | Where global CSS lives for your app. | |
| index.html | Where the main HTML template for the app lives. | |
| index.server.js | Where your Joystick app definition lives. The entry point for Joystick's development server. | |
| package.json | The default Node.js package.json file where scripts, dependencies, and Node-specific config live for your app. | |
| settings.<env>.json | Where the environment-specific config lives for your app (supports development, staging, and production). |