# Puter in Production ## Building ```bash npm run build ``` ## Usage Will build Puter in the `dist` directory. Include the generated `./dist/gui.js` file in your HTML page and call `gui()` when the page is loaded: ```html ``` ## Full Production Example Assuming the following directory structure in production: ``` . ├── dist/ │ ├── favicons/ │ ├── images/ │ ├── bundle.min.css │ ├── bundle.min.js │ ├── gui.js │ └── ... └── index.html ``` The `index.html` file below will load Puter and all the necessary meta tags, favicons, and branding assets: ```html Puter ``` ### Server settings The GUI is a single page application (SPA) and as best practice any route under root (`/*`) should preferably load the `index.html` file. However, there are situations where we want to load a custom page for a specific route: for example, the `/privacy` route may need to load a page that contains your privacy policy and has nothing to do with the GUI application. In these cases it is ok to load a custom page as long as the following essential GUI routes are loaded with the GUI (i.e. `index.html` file): - `/app/*` - `/action/*` In other words, consider the routes above as "reserved" for Puter. ### Publish My Website Right-click anywhere on the desktop to display options From the options menu, select "New". Then, choose "Folder". Give the folder a name according to your preference. After creating the folder: Right-click on the folder. Select the option "Publish as Website". ### Best Practices - The `title` tags and meta tags (``, `privacy-first personal cloud to keep all your files, apps, and games in one private and secure place, accessible from anywhere at any time.` the `` tag should be escaped to `<b>` so that the browser doesn't interpret it as an HTML tag. - Make sure to replace all new line characters with space when dynamically adding text to the HTML page. - Generally, for UX and SEO reasons make sure that the tags are filled with relevant information about the state the URL is representing. E.g. is the user on the desktop or an app?