ProzillaOS/docs

← Back

Documentation

Table of Contents

• Features
• Configuration
• Design
• FAQ
• Roadmap
• Contributing

Overview

Quickstart

1. Clone this repository.
2. Run npm install.
3. Run npm start and visit localhost:3000.

Development

1. Run npm start and watch your changes live at localhost:3000.

Building & deploying

1. Run npm run build, which will bundle all your files in the dist directory.
2. Upload the contents of the dist directory to your web server's root folder.

Deploying to GitHub Pages

1. Open deploy.sh and change DOMAIN to your domain, COMMIT_MESSAGE to your commit message and REPO_URL to the URL of your repo. Make sure you don't accidentally add or remove any quotes when editing these values.
2. Run npm run deploy - This will create a new build by running the redeploy script, add a CNAME pointing to your domain and then push the build folder to a branch called gh-pages.
3. Configure your GitHub Pages to deploy the gh-pages branch to your domain.

Once the initial setup is complete, you can simply run npm run deploy and your website will be built and deployed to GitHub Pages.

Note: When the deployment process is complete, you won't see the changes reflected on your website until a few moments later. This is because GitHub Pages needs to run its own build step before the website updates. You can view details about this process in the Actions tab on GitHub.

Configuration

See docs/configuration for more information.

Structure

• src directory

  Contains all code for the application, including CSS, JS and HTML files. This directory makes use of a feature-based folder structure. Utility files are often separated into their own subdirectory, called _utils, inside of their respective directory.

• public directory

  Contains all static files like images, webfonts and vector graphics as well as the index.html file, which contains all metadata and contains all bundled scripts after the build step. Also includes the config and documents folders from where certain files are loaded into the virtual drive.

• docs directory

  You are here. This directory contains all documentation for this project.

• dist directory

  Contains the static build files after building the application. This directory is not included in the GitHub repository.

Code style

Type	Case	Example
Folders	kebab-case	virtual-drive
.ts files	camelCase	virtualRoot.ts
.tsx files	PascalCase	Desktop.tsx
.css files & files in public dir	kebab-case	global.css
Local .module.css files	PascalCase	Desktop.module.css
Global .module.css files	kebab-case	utils.module.css
Variables	camelCase	const fooBar = true;
Global constant variables	MACRO_CASE	export const NAME = "Prozilla OS";
Classes	PascalCase	class WindowsManager { }
React components	PascalCase	export function WindowsView({ }) { }
Functions	camelCase	function focusWindow() { }
Types	PascalCase	type FooBar = boolean;

External files

• Design file - Figma
• Task board - Notion