All Tutorials

Build a Shopify App with Node and React

Set up your app

Start by setting up the tools and dependencies that you’ll need to build and run your app.

Install the latest stable version of Node.js

  1. Download and install Node.js.
    You can check to see if you have Node.js installed by running:
    Terminal
                    node -v
    
    If it’s already installed, then make sure that you’re using version 8.1.0 or later.

Create a project folder

You’ll need a folder to store the contents of your app.

  1. Create a project folder named after your app. For example, sample-embedded-app.
  2. Navigate to your project folder:
    Terminal
                cd sample-embedded-app
    

Create a package.json file

Node.js includes a tool called npm that manages Node.js packages to make development easier. The package.json file contains metadata that tell npm about your app’s dependencies. It also helps people who find your package understand its purpose. It’s unlikely that your app’s package will need to be shared publicly, so you can use default values and leave the descriptive fields blank.

  1. Create a package.json file using default values:
    Terminal
                npm init -y
    

Build a React scaffold using Next.js

You’ll use a React framework called Next.js to build your app. Next.js takes care of some of the things that you’d normally have to do when building a React app, including:

  • webpack configuration
  • hot module replacement
  • server-side rendering
  • client-side routing
  • updating babel configuration
  • code splitting

Install React, ReactDOM, and Next.js

  1. From your root project folder, install React, ReactDOM, and Next.JS:
    Terminal
                npm install --save react react-dom next
    

Create a view

Views are the pages that hold the frontend components that display the data your app queries and mutates. Next.js automatically routes views that are stored in a pages directory using the file name. This makes it easier to build your app navigation later in the tutorial.

  1. Create a pages folder in your project folder.
  2. Create an index.js file in the pages folder.

Add your first React component

The index.js file will become the main page of your app, so you’ll add a React component that will act as a hub to build the rest of your app around. Next.js takes care of React imports and exports, which means you don’t need to import React components, and exports should always be set to default.

  1. Open pages/index.js in your text editor.
  2. Add the following constant and sample div:

    /pages/index.js

    code contained in /pages/index.js
    const Index = () => ( <div> <p>Sample app using React and Next.js</p> </div> ); export default Index;

Add scripts to build and start your app

Add scripts to your package.json to tell npm to run your app through Next.js.

  1. Open package.json in your text editor.
  2. Add the dev, build, and start scripts to the file:

    /package.json

    code contained in /package.json
    { "scripts": { Remove: "test": "echo \"Error: no test specified\" && exit 1" Add: "test": "echo \"Error: no test specified\" && exit 1", Add: "dev": "next", Add: "build": "next build", Add: "start": "next start" } }

Run your project

Now that you’ve got your scaffold and a way to run it, test your app.

  1. From your root project folder, start your server:
    Terminal
                npm run dev
    
  2. Visit http://localhost:3000.

    You should see your app running on localhost:3000 with the text “Sample app using React and Next.js“.

    terminal screenshot alt
Continue to Embed your app in Shopify