This tutorial provides two ways of installing the storefront:
Building a storefront from ground up may seem like a drudgery. Thus, Saleor provides a ready-made Saleor React Storefront (SRS) which you can play with and extend further. Additionally, with the help of Saleor CLI, you can quickly create a running instance of SRS:
npm i -g saleor
to install the Saleor CLI tool.saleor storefront create my-storefront
This command will install a Saleor React Storefront project called my-storefront
on your machine. To run the storefront - start the local server - go to the my-storefront directory cd my-storefront
and start the development server pnpm dev
. The application will already be preinstalled with:
...and other goodies that will support you in extending the storefront further.
Now, you can skip the remaining steps in the setup and jump straight into the next sections of this tutorial. However, if you wish you can choose to go through the manual setup and configure all the nuts and bolts on your own, so that you have a better understanding of the base for building e-commerce applications with Next.js & Saleor using TypeScript.
If you prefer to set up your development environment manually, first you need to install Node.js and Next.js on your computer:
With npm
:
npx create-next-app@latest my-storefront
or with pnpm
(you need version 8.x
or higher):
pnpm create next-app my-storefront
This command will bootstrap the latest version of Next.js template app wired with Typescript. For more details on specifying different options when using Create Next App head over to the docs.
After the successful installation, you will be able to start the development server:
npm dev
or pnpm dev
.http://localhost:3000
in your browser to see it live.Please follow the next steps in this section to finish the manual setup.