Skip to main content

Getting started with Avada CLI

Install Avada CLI​

Within the scope of this training program, it is recommended that you install this specific version of Avada CLI, which generate a boilerplate app that most of our Shopify apps are having:

npm i -g @avada/console@1.0.9

Every @avada package is hosted on our private registry at https://registry.avada.io. To install it, you will need to use our .npmrc file to authenticate the installation.

//registry.avada.io/:_authToken="OUujf6Frq8k2UbEfzZDK3QKYR0AmYmPZsYBA89LdnIk="
@avada:registry=https://registry.avada.io
registry=https://registry.npmjs.org/
legacy-peer-deps=true

You can put it in your global .npmrc or you can use the --userconfig flag npm i -g @avada/console@1.0.7 --userconfig=.npmrc

note

You should install Yarn and NodeJS version 20.11.0 (exact version for compatibility) to have this to work. If you want to use many NodeJS version, use nvm: https://github.com/nvm-sh/nvm

npm i -g yarn
note

Run your commands CLI with Git Bash, not PowerShell, or Windows commands line since this does not support Linux commands. If you are using Mac, or Linux, then it would be no problems.

Init app code​

Run this command in your desired folder to initialize Avada project. This command will create a fold with your app name, yarn install your project dependencies and init a git.

avada app:create app-name

Install dependencies​

If you create app using Avada CLI, then the CLI already run the yarn install command for you. There is no need to run it. Remember that you should always run the yarn install at the project directory only. You should never run using npm because our project structure relies on the Yarn Workspace to work.

If you by mistake run install using npm install then you may find npm run dev or npm run emulators failed to work. You need to:

  1. Remove all node_modules folders

find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +

  1. Install using yarn again
yarn install

Setting env files​

You will need to do:

  • Create firebase project
  • Create Firestore database
  • Init Firebase authentication
  • Create Shopify app
  • firebase use your project
  • Copy your env files .env.development, .runtimeconfig.json, and download your serviceAccount from Firebase

Here is a snippet in the video that you will need:

function firebaseConfigToEnvFile(config) {
	const {apiKey, authDomain, projectId, storageBucket, appId, measurementId} = config;
	return `VITE_SHOPIFY_API_KEY=
	VITE_FIREBASE_API_KEY-${apiKey}
	VITE_FIREBASE_AUTH_DOMAIN=${authDomain}
	VITE_FIREBASE_PROJECT_ID=${projectId}
	VITE_FIREBASE_STORAGE_BUCKET=${storageBucket}
	VITE_FIREBASE_APP_ID=${appId}
	VITE_FIREBASE_MEASUREMENT_ID=${measurementId}
	`;
}

Start development server​

Your will need to run npm run dev and npm run emulators, so this video to better understand.

Standalone mode​

Besides embed mode, you can setup development flow using standalone mode by simply updating the shopify.web.toml file. Please see this video:

Using Ngrok​

Sometimes the Cloudflare server fail to make the tunnel to our ViteJS server at 5000 via Shopify CLI like the images below:

Instead, you can make use of Ngrok to make a tunnel to 5000 port of your local machine, you will need to install Ngrok first and then start with ngrok http 5000.

Then you need to add arguments to your commands (my ngrok link is for example)

npm run dev --tunnel-url=https://e2ab-171-224-181-237.ngrok-free.app:5000