The Site navigation toolbar shows a Public folder just above Backend; however,
I didn’t see any mention of how to use Public files and functions. Could you provide documentation and examples of how Public functions interact with frontend and backend functions?
Hi,
You can read the use of “Module Support” in article: Velo: JavaScript Support | Help Center | Wix.com
Just write your function in .js file under the public section then import it to your code.
Erez
Thank you Erez. I received a 404 Page not found error for the link provided.
Can backend and frontend modules import public functions?
Does the import statement look like import {function} from ‘public/file.js’?
Are there restrictions on which WIX APIs may be used in Public as there are with backend?
For example, wix-storage & wix-users only work in frontend.
Regards,
Scott
Hi Scott,
(Strange that you get 404 so for now I cut/paste the article and will check next week)
Working with JavaScript in Developer Tools
Developer Tools supports working in JavaScript and some special features, including:
· Support for the new ES2015 features
· Support for the new modules
· Support for the JavaScript Fetch API
· Share JavaScript code naturally between the backend and front-end using web modules
ES2015 Feature Support
ES2015 is the current version of the ECMAScript standard for JavaScript. It is a significant update to the language and the first major update since 2009.
Wix Code supports the new ES2015 syntax both in the backend and the front-end, including:
· Promises
· Arrow functions
· Destructuring assignments
· let and const declarations
Browsers are gradually adopting the ES2015 standard. Until the ES2015 standard is fully implemented, we transpile your ES2015 code into ES5, so it can run in current browsers.
Developer Tools supports source maps, so that even though the browser runs transpiled ES5 code, you can debug your ES2015 source code in your browser’s developer tools.
Module Support
Developer Tools supports the native module functionality included in the ES2015 release of JavaScript.
To use ES2015 module functionality, you need to follow the ES2015 Module Syntax . Only those items specifically exported in a module are exposed to other files. All other items in your module are internal to the module only.
For example:
// Filename - public/amodule.js
export function aFunction () {
// Only this function is exposed to other files.
return doSomething() + " or other";
}
function doSomething () {
// This function is internal to the amodule.js module.
return “Do something”;
}
To refer to an item in a module, you first need to import it:
import {aFunction} from ‘public/amodule.js’;
and then you can refer to it:
console.log(aFunction());
// Logs: “Do something or other”
You can export an item as default from a module:
// Filename - public/amodule.js
export default function aFunction () {
return “Do Something”;
}
To import a default item, use import with no curly braces, { }. You can assign the default function any name when importing it. In this case, doSome is assigned to aFunction because aFunctionis the default exported item in amodule.js.
import doSome from ‘public/amodule.js’;
When you import an item from a module, the entire module file is executed. This means that if you have code that is not part of a function or variable declaration in your module, it will execute the first time you import a function from your module. For example, if you have this code in your module:
// Filename - public/lib.js
export function aFunction () {
};
export function bFunction () {
};
console.log(“Hi”);
When you import aFunction from lib.js , your code will also log “Hi” to the console. This will run only once regardless of how many times you import a function from a .js file. So if you import bFunction, “Hi” is not logged to the console again.
Note:
You can only export functions in files that are located in the Public or Backend sections of the Site Structure sidebar . You cannot export functions from page or popup files.
Exporting Objects
You can export an object from a module. For example:
// Filename - public/amodule.js
export let myObject = {
prop1: “Here”,
prop2: “There”
}
You can then import it and refer to its properties:
import myObject from ‘public/amodule.js’;
console.log(myObject.prop1)
// Logs: “Here”
Module Scope
The following is a list of guidelines that define how you can share modules and functions between, and within, the backend and public scopes:
· A JavaScript file or script in backend can import a module from any file in backend or public.
· A file in public can import a module from any file in public.
· You can import functions from backend and use them in public, using a web module .
· You can use relative paths to refer to files with the “.” prefix.
· You can import a module from backend with the backend/ prefix.
· You can import a module from public with the public/ prefix.
· Modules can import other modules.
Hope its answers your needs, Erez
Thank you Erez. This is very helpful. Are there any restrictions about which WIX APIs are accessible in public modules? For example, I wanted to have a database hook function (which gets placed in the backend) set a local storage key/value using wix-storage api. However, wix-storage cannot be used in backend. Can I use wix-storage in public and have my backend hook function call a function exported from a public module?
Sorry, described approach DOES NOT WORK as described!
See code samples below.
In console output I see following:
console.js:35 — public/osbbUtils.js
console.js:35 — page.js
console.js:35 + osbbUtils: setup $w.onReady(…)
console.js:35 = common.userId: 4ade11f090[…]; loggedIn:false
console.js:35 + mainPage: setup $w.onReady(…)
console.js:35 ReferenceError: userCheck is not defined
at c1dmp.js:10
at eval (readyManager.es6?5568:14)
at safeRun (readyManager.es6?5568:26)
at eval (readyManager.es6?5568:53)
at Array.map ()
at trigger (readyManager.es6?5568:53)
at triggerOnReady (readyManager.es6?5568:79)
at InternalAPIs.value (internalAPIs.es6:157)
at startHandler.js:77
So, as you can see - exported function “checkUser()” IS NOT ACCESSIBLE in page code! 
But public code itself (in public/osbbUtils.js) was correctly executed.
Could you please advice how to resolve this problem? I need to access exported functions in page code.
=== page code ===
import osbbUtils from ‘public/osbbUtils.js’;
//alert(“-- osbbUtils.js --”);
console.log(“— page.js”);
$w.onReady( function () {
console.log(“+ mainPage: setup $w.onReady(…)”);
userCheck();
});
=== public/osbbUtils.js ===
import wixUsers from ‘wix-users’;
console.log(“— public/osbbUtils.js”);
export function userCheck() {
// […]
return true ;
}
$w.onReady( function () {
console.log(“+ osbbUtils: setup $w.onReady(…)”);
userCheck();
});
-
this is the feature request category - things like “why it does not work” should go into the community discussions category.
-
the problem here is a mistake in the JS of the page code. should be using osbbUtils.userCheck();