> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Add Code Files to Your App
## Article: Adding Code Files and Folders to Your App
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/add-code-files-to-your-app.md
## Article Content:
# Add Code Files to Your Blocks App
**Editor compatibility**
Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).
Wix Blocks provides various code file types for efficient app development. Public files handle client-side logic, while backend files manage server-side operations and database interactions. Web modules offer reusable backend code snippets. Additionally, a configuration file stores app-wide settings.
In addition to these core code files, widget, panel, and dashboard code are essential for building the user interface and app management features.
Note:
Adding code files for the first time requires releasing a [major version](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/manage-blocks-app-versions.md).
## Where to add code files
Where you add code files depends on the tool you are using.
- In the Blocks editor:
1. Click **Code**  in the left menu.
2. Select **Public & Backend**.
3. Select the type of file you'd like to add and a new file is created.
- In the the [Blocks-CLI integration](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-blocks-cli-integration-for-widgets.md), add code files directly from your IDE.
**Important:** The Blocks-CLI integration only works with the [Wix CLI for Apps](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/about-the-wix-cli-for-apps.md). The new [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md), which is the recommended tool for new app projects, doesn’t support this integration.
- In the [Wix IDE for Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-wix-ide-for-blocks.md), add code files in the Wix IDE.
## Add public files
Blocks public files are JavaScript files, or TypeScript files when working with the Blocks-CLI integration. These files have exported functions that can be imported and called in your app or on a website where the app is installed.
## Add backend files
Blocks backend files are used to manage server-side operations and database interactions. These files are not directly accessible from the frontend, ensuring that sensitive operations and data handling are securely managed on the server side. There are several types of backend files you can add to your app:
* **`.js` files:** are not directly accessible to users via front-end code.
* **`.web.js` files:** are accessible to the frontend. Use these to import functions from the backend into files or scripts in page code or in public files, and the functions will run on the server. Wix handles the client-server communication. Learn more about [calling backend code from the frontend](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/call-backend-code-from-the-frontend-in-blocks.md).
* **`.jws` files:** were used in the past instead of `web.js`. Currently deprecated but supported.
* **Unique backend files:**
* Blocks supports the use of [`events.js`](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md) and [`http-functions.js`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/expose-a-blocks-app-api-with-http-functions.md) files.
* Blocks doesn't support: `data.js`, `routers.js`, `realtime-permissions.js`.
You can [test backend functions](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md) in your app without releasing or installing the app.
## Functions exposed by your app
Every exported function at the root of a public or backend directory will be exposed when installing your app on a site. Note that exported functions that aren't in the root package will not be exposed.
Make sure to give your functions unique names. Blocks cannot expose two functions under the same name within the same app.
## Add a configuration file
A Blocks `config.json` file to defines settings that impact how your app works on a specific site. These settings typically vary from site to site, so the file you provide contains default settings that users can edit for each site.
When a user installs your app on their site, they can modify the values in configuration file through the **Packages & Apps** tab in the editor, for example:
The data in the `config.json` file can only be imported by backend files.
Examples of information you might put in a `config.json` file include:
* Company name and contact info.
* A site-specific default value for a function or API call.
We recommend that your `README.md` file contains instructions for modifying the `config.json` file.
### Use the `config.json` settings
The values in `config.json` can only be accessed by the backend code in your app.
Import the `config.json` file, using [getPackageConfig](https://www.wix.com/velo/reference/wix-configs-backend/getpackageconfig):
```javascript
import { getPackageConfig } from 'wix-configs-backend'
```
Use the values from the file in your backend code:
```javascript
const = await getPackageConfig('');
```
### `config.json` examples
In [Tutorial: Creating a Package for API Calls](https://support.wix.com/en/article/tutorial-creating-a-package-for-api-calls), you create a config.json file that contains a default stock symbol to use in a stock quote API call. You can edit that value on any of your sites on which you've installed the API Call package.
The `config.json` file:
```json
{
"defaultSymbol": "wix"
}
```
The tutorial's backend `apiCall.jsw` file imports that value and uses it in the code as the value for the stock symbol variable, _sym_.
```javascript
import { getPackageConfig } from 'wix-configs-backend'
...
const sym = await getPackageConfig('defaultSymbol');
```
## Add npm packages
You can add [`npm`](https://www.npmjs.com/) dependencies to your app.
**To add an `npm` package:**
1. Click **\+ Add file** in the **npm** section to add your first package. Or, hover over **npm** and click the  icon to add more packages.
2. Select the package that you want to install from the **Package Manager**.
Learn more about [installing npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-in-the-editor.md#install-an-npm-package).
## Document your app
Add a `README.md` [Markdown](https://www.markdownguide.org/) file to document your app. Your README should include the following sections:
* An introduction that explains what the app does and why it's useful
* File contents and functions provided
* Packages, such as [`npm` packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md), included in your app, along with licensing information for those packages. For example, your users should be aware that when they install a package that uses an `npm` package, they agree to that package's license agreement.
* Instructions for using the app's functions.
* Usage examples.