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:

• The wix.config.json file found in the repo's root folder.

• The src folder, that contains the following:

  • The Backend folder
  • The Pages folder
  • The Public folder
  • The velo.dependencies.json file (only exists once your first npm package is installed)

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

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.

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:

1
import { myFunctionName } from 'backend/myFileName';

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

permissions.json

1
"myFunction": {
2
  "siteOwner" : {
3
    "invoke" : // Boolean
4
  },
5
  "siteMember" : {
6
    "invoke" : // Boolean
7
  },
8
  "anonymous" : {
9
    "invoke" : // Boolean
10
  }  
11
}

1
{
2
  "web-methods": {
3
    "*": {
4
      "*": {
5
        "siteOwner": {
6
          "invoke": true
7
        },
8
        "siteMember": {
9
          "invoke": true
10
        },
11
        "anonymous": {
12
          "invoke": true
13
        }
14
      }
15
    },
16
    "backend/helperFunctions.jsw": {
17
      "calculate": {
18
        "siteOwner": {
19
          "invoke": true
20
        },
21
        "siteMember": {
22
          "invoke": true
23
        },
24
        "anonymous": {
25
          "invoke": true
26
        }
27
      },
28
      "fetchData": {
29
        "siteOwner": {
30
          "invoke": true
31
        },
32
        "siteMember": {
33
          "invoke": false
34
        },
35
        "anonymous": {
36
          "invoke": false
37
        }
38
      },
39
      "syncWithServer": {
40
        "siteOwner": {
41
          "invoke": true
42
        },
43
        "siteMember": {
44
          "invoke": true
45
        },
46
        "anonymous": {
47
          "invoke": false
48
        }
49
      }
50
    }
51
  }
52
}

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:

1
import { myFunctionName } from 'public/myFileName';

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.