Configuration

The xAtom configuration file ⚙️. Your steadfast ally in the realm of web app crafting. Configure your Webflow project for real-time development changes, set the local serving port, and fine-tune vital settings for your site.

Assuming you've just set up your new xAtom project, your xatom.json could resemble the following

xatom.json

{
  "webflowSubdomain": "YOUR_WEBFLOW_SUBDOMAIN",
  "port": 3020,
  "source": "./src/app.ts",
  "dist": "./dist",
  "scriptList": ["app.js"],
  "scriptAttribute": "xa-script"
}

Exploring xAtom Configuration Essentials

Name	Type	Default	Description
webflowSubdomain	string	YOUR_WEBFLOW_SUBDOMAIN	Indicate your Webflow staging sub-domain. For instance, if your Webflow staging domain is xatom-app.webflow.io set xatom-app as the value.
port	number	3020	Choose your preferred local development serving port. xAtom will initiate a development server on this port to preview your Webflow site and your business logic. For instance, if you set it to 3020, you can access it for testing at http://localhost:3020.
source	string	./src/app.ts	This is your web application's business logic entry point.
dist	string	./dist	This is where your web application's production-ready code will be generated and stored.
scriptList	string[]	["app.js"]	Specify the JavaScript file to include on each page during development with xAtom. xAtom ensures seamless testing and development by injecting your custom code from the dist folder. The default setting is ["app.js"], matching the source ./src/app.ts
scriptAttribute	string	xa-script	You might want to exclude or block specific JavaScript files from your published Webflow pages to prevent conflicts with your local JavaScript custom code. Your site already includes xAtom-deployed scripts, such as <script xa-script="true" src="https://mysite.com/js/app.js"></script>. By adding an attribute to this script on the published Webflow site, you can instruct xAtom to prevent the deployed script from executing, ensuring that only your local version runs. To remove scripts from development pages, you can add an attribute like xa-script="true" to your script tag.