# Development
Pages are developed, maintained and deployed by Ubidots **users** in order to create completely custom visualization that meet requirements otherwise not addressed natively by the platform.
A Page is structured around a specific set of files. These files not only determine the Page settings, for example, references to local or external CDN-exposed CSS and JavaScript (JS) libraries, but also define its logic and overall functionality. The file structure for a Page is outlined below:
```
├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│ ├── some_files_or_folders
```
{% hint style="warning" %}
Adhering to this file structure and including all the mentioned files is mandatory for the Page to function correctly and be able to be deployed.
{% endhint %}
{% hint style="info" %}
**Allowed file extensions in the static folder**
.csv, .css, .gif, .html, .ini, .jpeg, .jpg, .js, .json, .jsx, .log, .md, .mjs, .png, .rst, .svg, .ts, .tsv, .tsx, .toml, .txt, .webp, .xml, .yaml, .yml
{% endhint %}
## manifest.toml
The manifest file defines the Page's settings and references to local or external CSS and JS resources, that is, it outlines:
* Name of the page.
* Keywords.
* Description.
* Path to local files.
* Local and third party JS libraries.
* Local and third party CCS stylesheets.
The typical manifest file of a Page is composed by the below keys and values.
| Key | Type | Description |
| --------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | String | Name of the page |
| keywords | Comma-separated strings | This is added in a `` tag to the HTML document's ``. |
| description | String | This is added to the HTML document's `` tag within a `` tag. |
| static\_paths | List of strings | Paths to folders containing local files. |
| js\_libraries | List of sets | It references local JS files. These files are included with a `
```
## script.js
This file holds the JS logic of the Page. It can:
* Use the `js_libraries` and `js_thirdparty_libraries` specified in the `manifest.toml` file.
* It has access to [Ubidots built-in JS library](https://dev.ubidots.com/dashboards-and-widgets/html-canvas/built-in-library).
## body.html
This is the HTML body of the page. You should only include the contents of the ``. Ubidots will then put all of it within the actual Page's body. For example:
Your code:
```html
```
Loaded in the page:
```html
```
{% hint style="danger" %}
Your body.html file should not include the \ as Ubidots creates it using the manifest.toml file.
{% endhint %}
## style.css
This the main stylesheet of your page, although you can import more either from local files located in the "static\_path" folder, or from external resources.
## static folder
In this folder, you can upload additional CSS or JS files, more folders or even other types file. This serves as a place to include proprietary libraries or resources such as fonts, icon, images, etc., that are needed for the page rendering.\
These files can be used in 2 ways within the Page:
1. By being referenced in the `manifest.toml` file, in which case Ubidots will import them appropriately as described in the [Libraries syntax](#libraries-syntax) section.
2. By accessing the files using the public `staticURL` of the page. See more below.
Accessing files in the `/static` folder (or other folder referenced in the `manifest.toml`) from the `script.js` is done as follows:
```
const staticPageUrl = window.staticUrl;
const imageUrl = `${staticPageUrl}//.`;
```
Where `` is the path referenced in the manifest.toml, for example "static", and then `` and `` are the specific file and extension within the "static" folder.
{% hint style="info" %}
**Allowed file extensions**
.csv, .css, .gif, .html, .ini, .jpeg, .jpg, .js, .json, .jsx, .log, .md, .mjs, .png, .rst, .svg, .ts, .tsv, .tsx, .toml, .txt, .webp, .xml, .yaml, .yml
{% endhint %}