Add Code Files to Your Blocks App

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.

To add code files to your app:

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.

Add public files

Blocks public files are JavaScript files with exported functions. These functions can be imported and called anywhere on a website.

Add backend files

Blocks backend files are used to manage server-side operations and database interactions. These files are not directly accessible from the front-end, 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, which are not directly accessible to users via front-end code. 
• .jsw files, which are web modules that are accessible to the front-end. 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. Velo handles the client-server communication. Learn more about Velo web modules.
• Unique backend files:
  • Blocks supports the use of events.js and http-functions.js files.
  • Blocks doesn't support: data.js, routers.js, realtime-permissions.js.

You can test backend functions in your app without building or installing the app.

Functions exposed by your app

Every exported function at the root of a public/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:

Use the values from the file in your backend code:

config.json examples

In 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:

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.

Add npm packages

You can add npm 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.

Document your app

Add a README.md Markdown 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, 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 npm package's license agreement.
• Instructions for using the app's functions.
• Usage examples.