Wix Blocks: Adding Code Files and Folders to Your App
4 min read
Wix Blocks is currently open to a limited number of users.
Wix Blocks enables you to create code files that add specific functionality to Wix sites. create these files once and use them again and again on as many sites that you want, by installing the app on those sites.
You can add public files, backend code and a configuration file. To add code files, first
- Click Public & Backend
icon under the App Structure 
menu.
Add Public Files
To add public files:
- Click + Add file in the Public section to add your first file. Or, hover over Public and click the
icon to add more files or a folder. - Name your file.
- Write the exported functions in the code panel that Blocks opens for your js file.
Add Backend Files
You can add two types of backend files 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 files, but does not support http-functions.js, data.js, or routers.js files (learn more about events.js).
To add backend files:
- Click + Add file in the Backend section to add your first file. Or, hover over Backend and click the icon to add more files or a folder
- Name your file.
- Write the backend code in the designated tab in your code panel in Blocks.
Testing your backend function
You can test your backend functions in your app without building or installing the app. Learn how.
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.
Give your exported functions unique names
Since we can’t expose 2 functions under the same name within an app, please avoid defining multiple exported functions under the same name in the root of a backend/public directory.
Add a Configuration File
You can add a config.json file to define settings that affect 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 you can edit for each site.
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.
To add a config.json file:
- Click + Add config.json file in the Configuration section of your Public & Backend
panel (don't confuse this with the configuration tab in the top bar!). - Write the code in the designated code tab that opens.
Document your config.json
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:
1import { getPackageConfig } from 'wix-configs-backend'Use the values from the file in your backend code:
1const <variable> = await getPackageConfig('<key>');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 config.json file:
1{
2 "defaultSymbol": "wix"
3}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.
1import { getPackageConfig } from 'wix-configs-backend'
2.
3.
4.
5const sym = await getPackageConfig('defaultSymbol');Add npm Packages
You can npm dependencies into your app.
Most npm packages that are useful in Velo sites have already been approved. If a package you would like to use has not yet been approved, you can request that it be added to the list.
To add an npm package:
- Click + Add file in the npm section to add your first package. Or, hover over npm and click the icon to add more packages.
- 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.
Did this help?
|