Velo: Understanding Your Site's GitHub Repository

Once you set up Git Integration & Wix CLI, you can edit your site's code using your favorite local IDE. Your site's GitHub repository has a specific file structure that Wix uses to run your code. This article explains the parts of this structure that you need to know before starting to edit your code.

The repo file structure

The file structure includes these important elements:

Add your code in either the Pages, Backend, or Public folders. Files or folders added to the root of the src folder are ignored.

Notes: The following Velo features can't be added to a site when using Git Integration & Wix CLI:

Pages folder

This folder contains code files for each of the pages on your site as well as the masterpage.js file. The code you add to these files runs when visitors open pages on your site. These files correspond to the ones found in the Main Pages section of the Page Code tab in the Velo Sidebar.

When you add a page to your site in a Wix editor in your browser, a code file for that page gets added to your repo. The name of the file has 2 components: the name of the page that you define in the editor, and an internal ID string. The sections are separated by a period.

When you add a dynamic page to your site 2 code files are added to the site's repo corresponding to the dynamic list and dynamic item pages.

When you open a page's code file, you see the same sample code that appears in these code files in Wix editors in your browser.

When you delete a page in a Wix editor in your browser, the page's corresponding code file is deleted from your repo.

Notes:

  • You can't create new code files for pages from your IDE. To add a file, create a new page for your site in a Wix editor in your browser, and sync your site with your local IDE.
  • Do not rename code files for pages. Wix uses these file names to associate the files with the appropriate pages on your site. If you rename a file, your code is ignored and a new code file is created for the page.

Backend folder

This folder contains the backend code files for your site. These files correspond to the ones found in the Backend section of the Public & Backend tab in the Velo Sidebar. Add the following files to this folder to include them in your site:

  • Web Modules:

    These are files that allow you to expose functions in your site's backend that you can run in your frontend code. These files require a .web.js file extension.

    Note: For web modules with a .jsw extension, permissions are managed using the permissions.json file. Note that .jsw web modules are deprecated, although still supported for backward compatibility for both Wix Editor and Wix Studio.

  • data.js.

    A file for adding data hooks to your site's collections.

  • routers.js

    A file for implementing routing and sitemap functionality for your site.

  • events.js

    A file for implementing your site's backend event handlers.

  • http-functions.js

    A file for implementing HTTP endpoints that are exposed on your site.

  • jobs.config

    A file for scheduling recurring jobs. Jobs consist of other backend code that's run at regular intervals.

  • General backend files

    JavaScript code files. You can import code from these files into any other backend file on your site. These files require a .js file extension.

Use the following syntax to import code from backend files:

Copy

Trying to import from the relative path in your site's repo doesn't work.

permissions.json

When using `.jsw` (deprecated) web modules, you can't change permissions in the editor when using Git Integration & Wix CLI. Instead, use the permissions.json file to set function permissions.  

The backend folder also contains the permissions.json file. This file defines permissions for the functions in your web module files. The file contains a key, "web-methods", whose value is an object that contains keys named after the web module files in your backend folder. Name these keys with the following syntax: "backend/{path to file}/myFile.jsw". The value for each file name key is an object that contains keys named after the functions in that file. Each function key has a value with the following format:

Copy

These values reflect the different levels of web module function permissions. You should set them using the following options:

  • Owner-only access:

    • siteOwner.invoke: true
    • siteMember.invoke: false
    • anonymous.invoke : false

  • Site member access:

    • siteOwner.invoke: true
    • siteMember.invoke: true
    • anonymous.invoke : false

  • Anyone can access:

    • anonymous.invoke: true
    • siteMember.invoke : true
    • anonymous.invoke: true

The "web-methods" object must also contain a "*" key. The value for this key defines the default permissions that are applied to any function whose permissions you don't set manually.

Here is an example permissions.json file for a site with a backend file called helperFunctions.jsw. The file's functions are called calculate, fetchData, and syncWithServer. In this case anyone can call calculate, site members can call syncWithServer, and only site owners can call fetchData.

Copy

Public folder

This folder contains the public code files for your site. These files correspond to the ones found in the Public section of the Public & Backend tab in the Velo Sidebar. You can import code from these files into any other file on your site.

Use the following syntax to import code from public files:

Copy

Trying to import from the relative path in your site's repo doesn't work.

velo.dependencies.json

This file is created automatically when you install your first npm package. Wix uses this file to track the npm packages installed on your site. The file is updated automatically when you install a package with the Wix CLI. Don't change this file manually.

wix.config.json

Wix uses this file to associate your repo's code with a particular site and UI version. This file is updated automatically when your repo is synced with the Wix editors. Don't change this file manually.

Was this helpful?
Yes
No