E-commerce website with Nuxt, GraphQL, Strapi and Stripe - Setup (1/7)

This tutorial is part of the « E-commerce website with Strapi, Nuxt.js, GraphQL and Stripe »

• 🏗️ Setup (part 1) - current
• 🏠 Homepage (part 2)
• 🍔 Restaurant page (part 3)
• 🛒 Shopping Cart (part 4)
• 🔐 Authentication (part 5)
• 💵 Checkout (part 6)
• 🚀 Bonus: Deploy (part 7)

Note: The source code is available on Github.

Introduction

Strapi is the leading open-source Headless CMS. The new major version of Strapi introduces many improvements:

• New user interface with improved navigation and accessibility.
• Plugin API allowing everyone to easily create and maintain plugins thanks to a programmatic approach.
• Database query engine that allows you to make precise queries and load only necessary data, which improves performance and facilitates customization.
• Updated REST & GraphQL API with better filtering, pagination, standardised request and response format.
• API Token that allows you to manage the permissions of the Content API requests more smoothly.
• Error handling with improved messages and standardised error codes makes it easier to fix issues.

Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Vue.js is an open-source Model–view–view model JavaScript framework for building user interfaces and single-page applications. GraphQL is a query language for your API and a server-side runtime for executing queries using a type system you define for your data. Stripe is an online payment processing for internet businesses.

Goals

Get ready to develop a Deliveroo clone, using amazing technologies: Strapi, Nuxt.js, GraphQL, and Stripe! From signup to order, you are going to let users discover restaurants, dishes and select their happy meal.

This demo, of the final result, below should make you hungry:

Looking forward to cooking this app? Let's get started!

Prerequisites

• Node.js, we recommend you have the v14 version installed.
• A text editor, we recommend VS Code with the Vetur extension, a Vue tooling for VS Code, powered by vls. It comes with multiple features like syntax highlighting, formatting, IntelliSense, debugging, and more.
• A terminal, we recommend using VS Code's integrated terminal.

Step 1 - Setup

Create a new empty directory and navigate into it:

    # Create a new folder
    mkdir deliveroo-clone-tutorial
    
    # Move into new folder
    cd deliveroo-clone-tutorial
    
    # Opening new folder in VS Code
    code -r .

Step 2 - Install a Nuxt project

In this step, we will use create-nuxt-app to create a new Nuxt project. Open a terminal, or from Visual Studio Code , open an integrated terminal and use the following command to create a new starter project:

    npx create-nuxt-app frontend

After running the command above, you may answer some questions. Once all questions are answered, it will install all the dependencies.

    ? Project name: deliveroo-clone
    ? Programming language: JavaScript
    ? Package manager: Yarn
    ? UI framework: None
    ? Nuxt.js modules: Skip
    ? Linting tools: ESLint, Prettier
    ? Testing framework: None
    ? Rendering mode: Universal (SSR / SSG)
    ? Deployment target: Static (Static/Jamstack hosting)
    ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
    ? Continuous integration: None
    ? Version control system: Git

Now that you've created your Nuxt project, you are ready to start a new Strapi project.

Step 3 - Install a Strapi project

Simply copy and paste the following command line in your terminal to create your first Strapi project.

    npx create-strapi-app@latest backend --quickstart

Using the --quickstart flag at the end of the command to directly create the project in quickstart mode, which uses the default database (SQLite).

Once the installation is complete, your browser automatically opens a new tab.

Complete the form, to create your new administrator account.

Good job, you successfully set up both Nuxt and Strapi projects! 🎉

Step 4 - Directory Structure

The default structure is intended to provide a great starting point for both small and large applications. Here's how our folder structure would look like:

    // Folder structure
    deliveroo-clone-tutorial
    ├── backend # default structure of a Strapi project
    │   ├── build
    │   ├── config
    │   ├── database
    │   ├── favicon.ico
    │   ├── node_modules
    │   ├── package.json
    │   ├── public
    │   ├── README.md
    │   ├── src
    │   └── yarn.lock
    └── frontend # default structure of a Nuxt application
        ├── components
        ├── jsconfig.json
        ├── node_modules
        ├── nuxt.config.js
        ├── package.json
        ├── pages
        ├── plugins
        ├── README.md
        ├── static
        ├── store
        └── yarn.lock

You can learn more about Nuxt directory structure at Directory Structure, and for Strapi check project structure.

Conclusion

The installation script has just created an empty project. We will start building the Homepage in the next step.