Create new website

[ab7865]

Your site's file structure is located under the src folder which contains the following folders:

• backend
• pages
• public
• styles

  Adding frontend code to site pages

The src/pages folder contains code files for each of the pages on your site as well as the masterpage.js file. New pages you add to your site from the editor appear under this folder. Use the $w API to interact with your site's elements:

$w.onReady(function () {
  
  $w("elementId").onClick(() => {
    console.log("Hello World!")
  })

});

The code you add to these files runs when visitors open pages on your site.

Page code files

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

Notes:

• Do not rename code files for pages. Wix uses these file names to associate the files with the appropriate pages on your site.
• You can't create new page code files in the Wix IDE. To add a file, create a new page for your site in the editor.

masterpage.js

The code in your masterpage.js runs on all pages of your site. This file is created automatically. Use this file to add code for elements that appear on all pages of your site or for general site functionality.

Importing code from other files

To import functions from other code files into your page code, using the syntax below.

For public code files:

import {functionName} from 'public/myFileName';

For backend code files:

import {functionName} from 'backend/myFileName.web';

Note: Trying to import code from the relative path in your site's files doesn't work.

  Writing backend code

The src/backend folder contains the backend code files for your site. Backend code files for Wix sites are written in JavaScript and run using the Node.js runtime environment.

Web methods

In order to call backend code from the frontend, use a special type of wrapper function called a web method within a web module. A web module is represented by a file with a `.web.js` suffix. Wix handles all the backend-frontend communication required to enable this access.

Here is an example of a web method that multiplies two numbers:

// math.web.js

export const multiply = webMethod(Permissions.Anyone, (a,b) => {
    return a * b
});

This function can be then called from the frontend like this:

// Home.c1dmp.js

import { multiply } from 'backend/math.web.js';

$w.onReady(function () {
    multiply(3,4).then((results) => {
        console.log(results);
    })
});

Special backend files

Wix supports special backend files that provide different functionality. Add the following files to the backend folder to include them in your site:

• Web Module files: 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.

• 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 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.

  Writing public code

The src/public folder contains the public code files for your site. You can import code from these files into any other file on your site.

To import functions from other files to use in your public code files, use the following syntax.

For other public code files:

import {functionName} from 'public/myFileName';

For backend code files:

import {functionName} from 'backend/myFileName.web';

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

  Customizing your site using CSS

The src/styles/global.css file contains the CSS code for your site. Styling with CSS allows you to completely customize the elements on your site.

There are 2 ways to apply CSS styling to your site:

1. Global classes

Use global classes to apply styling to all elements of a specific type, on all site pages. CSS editing is available for these supported classes.

The example below show how to set a red background to all of your buttons in your site.

  .button {
    background-color: red;
  }

2. Custom classes

Use custom classs to apply style for specific elements. You can create custom classes using the CSS Classes panel, or with code using the CustomClassList API.

The example below show how to change the cursor on a button to crosshair:

  .myCustomClass {
    cursor: crosshair;
  }

  Adding custom extensions

Custom extensions, also known as SPIs, allow you to add your own custom logic to existing Wix app flows and to integrate services from 3rd party providers. The src/backend/__spi__ folder contains a subfolder for each custom extension on your site.

The process for implementing an SPI has these steps:

1. Create a new extension on your site using the Wix Studio Code panel.
2. Implement your extension with custom code using the Wix IDE.
3. Deploy the extension by publishing your site.

Learn more about custom app extensions using SPIs.

  Working in concurrent mode (Beta)

Two or more site collaborators can edit a site's code at the same time in the Wix IDE. Edits made in one instance of the IDE are synced to the other instance in real time.

However, you can't edit your site's code in both the Wix IDE and the Wix Studio Code panel at the same time. You also can't edit your code in the Code panel if other site collaborators are editing in the Wix IDE. When you open the Wix IDE, the Code panel switches to read-only mode. The Code panel displays this message:

If you want to edit your site's code in the Code panel, all site collaborators must close the Wix IDE. You can then click Start Coding in the Code panel.

Tip:
Don't forget to publish your site in the Wix editor to deploy your code.