This guide explains the bare minimum steps required to get a basic headless project up and running using the Wix CLI for Headless. As part of this setup, you'll get an integrated frontend site and private app. For more information, see About the Wix CLI for Headless.
Before getting started, make sure that:
Run the following command to create a new headless project:
Enter the name of your business. This is the name of your headless project on Wix. The CLI creates a Wix Headless project for you with this name. This project is added to your Wix sites list.
Choose an initial template for your project. Learn more about the available templates.
Enter the name of your custom frontend project. This name is used to identify the client that's automatically created for your private app.
Choose the directory where you want to create your local project files. The CLI has generates the local code files for your project in a directory with the package name you chose.
After the CLI finishes generating your headless site, you can choose whether to publish it now. If you select Yes, the CLI builds and publishes your site, and gives you the site URL. If you select No, you can publish later by building and releasing your project.
Navigate to your project directory:
Run the following command to start the local development server:
The CLI builds a local environment for your project and provides links to view your site and dashboard.
The development environment is set up for hot reloading, so any changes you make to your code are immediately reflected in the browser.
Note: In this step we're calling listMembers()
in the Wix Members API, but you can use any method in any Wix Javascript SDK API.
Close the local development environment.
Install the @wix/members
package:
Add the following to your index.astro
file's front matter:
Your front matter should look something like this:
Run the following command to restart the local development server:
Click the link to open your site.
Return to the terminal. You should see the following log showing that your site currently has 0 members:
After completing the above steps, you have a simple headless project that you can experiment with and test locally.
You can now: