In this tutorial, you'll create an app with a simple dashboard page extension using Wix CLI.
Let's start by creating a new app project.
Open a terminal and navigate to the folder where you want to create your app.
Run the following command using npm or yarn:
npm
yarn
If prompted, press y
to install the @wix/create-app
package.
Select A new Wix App.
When prompted to enter a name for your app, press Enter to use the default name, which is My Wix App.
The CLI prompts you to choose a development site (test site), which you’ll use throughout this tutorial to run and test your app. You can choose an existing Wix site as your development site, or create a new one. Let’s Create a new Development Site. The newly-created development site is automatically named something like Dev Site 5x2043, and can be found in your Wix account’s list of sites.
Follow the prompt to open the development site on your default browser. If the browser doesn’t open, install your app on your test site manually and skip the next step.
Click Agree & Add to install your app on your development site.
Back in the terminal, press Enter to select the default folder name (my-wix-app
) for your app in your local file system.
You now have a new app in the Custom Apps page, a new folder in your local file system, and a local git repository for developing and testing your app.
The project contains all the files your app needs to run locally and in production, including:
package.json
file with your apps dependenciesNow that you’ve initialized your app, you can run a local development server to see the app in action, and view local changes as you develop your app. The local development environment runs the app and its initial boilerplate code on the development site that you chose in the previous step.
To run a local development server for your app:
Navigate to your newly created folder for your app.
Run the following command using npm or yarn:
npm
yarn
Follow the prompt in your terminal to open the development site in your browser.
Your app is now running on your development site. As you develop your app, any changes made to your app’s code are reflected in real-time on your development site.
Let's make a small change in the boilerplate code to see how you edit your app:
In the initial dashboard page, click the Show a toast button.
You'll see to see a toast open at the top of the page. Let's change the message it displays.
Open the /src/dashboard/pages/page.tsx
file.
Replace the button component's onClick
event handler with:
Save the file and go back to the browser.
Click the button again to see the new toast message.
You now have a fully working app that can be deployed and installed on Wix sites. Take some time to play around with the code and try to add more features to your app.
Use the following resources to continue building you app: