Skip to main content

Quick start

Create a new application​

To create your first Archibald project, you’re going to use the @archibald/create package. This command brings up an interactive prompt that asks you questions about the project you want to create. After you enter all the information, the CLI uses your answers to automatically generate your new Archibald project.

Let’s take a closer look at the process:

  1. Open the command line, and use the cd command to change directories into the folder where you want to create your new Archibald project. For example, if you wanted to create your new project on your desktop, you might type:
cd Desktop
  1. Run the following command from the command line. This will start up the interactive prompt to help you create a new Archibald project.
npm init @archibald

or, equivalently:

npm create @archibald
  1. When the prompt asks, “What is the name of the project?” enter a name for your project.
? What is the name of the project? my-project
  1. When the prompt asks, “What is the name of the author?” enter a name.
? What is the name of the author? John Doe
  1. When the prompt asks, “What is the email of the author?” enter an email address.
? What is the email of the author? john.doe@test.com
  1. When the prompt asks, “What are the environments for this project?” enter a comma-separated list of environments for which the project should be generated. Alternatively, you can also use the default value. By default local and prod environments will be generated.
? What are the environments for this project? local,prod
  1. When the prompt asks, “What are the tenants for this project?” enter a comma-separated list of tenants for which the project should be generated. Alternatively, you can also use the default value. By default netconomy-b2c tenant will be used.
? What are the tenants for this project? netconomy-b2c
  1. When the prompt asks, “What are the platforms for this project?” enter a platform name. Alternatively, you can also use the default value. By default shop platform will be used.
? What are the platforms for this project? shop
  1. When the prompt asks, “What template do you want to use?” select shop template.
? What template do you want to use? shop
  1. When the prompt asks, "Do you want to install dependencies?" type Y to install the dependencies. After this step, the command will start building your project.
? Do you want to install dependencies? Y

Congratulations, you’re now the owner of a brand new Archibald project!

Run your application locally​

So far, you’ve generated the code for your project, but what does it actually look like in a web browser like Firefox or Google Chrome? To find out, you’ll first need to start up your site’s local development server.

The development server is a useful tool for when you’re working on your site locally (from your own computer). When your development server is running, you can use a web browser to interact with your local copy of your project. That way, you can test out changes to your code, to make sure they work before you actually publish a new version of your project to the internet.

To start up your development server, do the following:

  1. In the command line, change into the directory you created for your site:
~/Desktop
cd my-project
Whenever you want to run any commands for your project, you need to be in the context for that project. That is, your command line needs to be pointed at the directory where your project’s code lives. :::
  1. From your site directory, start the development server by running the following command:
npm start

When you start the development server you will be asked following questions:

  • When the prompt asks, “What environment do you want to use?” select an environment you defined during the generation process.
? What environment do you want to use? local
  • When the prompt asks, “What tenant do you want to use?” select a tenant you defined during the generation process.
? What tenant do you want to use? netconomy-b2c
  • When the prompt asks, “What platform do you want to use?” select a platform you defined during the generation process.
? What platform do you want to use? shop
  • When the prompt asks, “What compile mode do you want to use?” select development compile mode.
? What compile mode do you want to use? development
  1. After a few moments, the application will be opened on http://localhost:3100 address in your default browser.

And there it is: your very first Archibald project! 🎉

You’ll be able to visit the project locally at http://localhost:3100 for as long as your development server is running.

Next steps​

Once your project is running, add end-to-end tests to verify it. Archibald supports both Cypress and Playwright through the same archibald e2e command (which also starts the app for the run) — see End-to-end testing to pick a runner and get started.