Shopify Node.JS react tutorial - utter failure

MAKO-Royce
Visitor
1 0 0

Hello, 

I have spent the better part of the day trying to figure out some of the many problems with the actual tutorial. I have made it to step 4 (build user interface with polaris  / Add Shopify App Bridge. I already have a host of small bugs that I will try and summarise but I have now hit a wall and can go no further.

 

1st Problem) 

in Steps 4.1.1 - 4.1.3 the next.config.js: 

The original from the tutorial:

 

require("dotenv").config();
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');

const apiKey =  JSON.stringify(process.env.SHOPIFY_API_KEY);

module.exports = withCSS({

 

The original needs to be changed to:

 

require("dotenv").config();
const webpack = require('webpack');

const apiKey =  JSON.stringify(process.env.SHOPIFY_API_KEY);

module.exports = {

 

  __________________

Equally I needed to run:

 

npm install wedpack --save

 

 

If i did not do this, i always received 

 

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

 

and the polaris CSS didnt work. Now The small mod eliminates the warning in my terminal but my css still doesnt work.

shopify1.png

 

This is the same for the annotated-layout page. 

 

I Do not know why but I had to add:

 

import {AppProvider, EmptyState, Layout, Page } from '@shopify/polaris';
import translations from '@shopify/polaris/locales/en.json';

 

to the beggining of my pages (.index and annotated..). This was not specified in the tutorial, but if I did not at this and then wrap the <page> </page> with <AppProvider...> </AppProvider> otherwise i got another error everytime i tried to load my app.

________________________

 

So now I am upto the part with the Add Shopify Bridge and I have done everything upto the title bar section, 

 

 

import { EmptyState, Layout, Page } from '@shopify/polaris';
import { TitleBar } from '@shopify/app-bridge-react';
const img = 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';

const Index = () => (
  <Page>
    <TitleBar
      title="Sample App"
      primaryAction={{
        content: 'Select products',
      }}
    />

 

  however adding the title bar makes it where the site doesnt load and I get 3 errors of this nature:

shopify2.png

I suspect it has something to do with the <appprovider> wrappers in the index.js page. Either way, it has been a total mess and I have had no luck with this tutorial OR the Shopify CLI tutorial. 

 

Is there an updated tutorial with upto date compatibilites? What have I done wrong in this setup? Is there a git repetoire where a proper scaffolding can be cloned? I know this is a bit scatter brained, but this tutorial has sent me to the 4 corners of stackoverflow, git, and this forum. The two tutorials for Node.JS & the Shopify CLI seem to be outdated or working with non-compatible dependancies.

 

 

Here is my package file for anyone wondering about version compatibilité (I weirdly had to uninstall react in order to install "@shopify/app-bridge-react""^1.29.0")

 

{
  "name": "mako_deep",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@shopify/app-bridge": "^1.29.0",
    "@shopify/app-bridge-react": "^1.29.0",
    "@shopify/koa-shopify-auth": "^3.2.0",
    "@shopify/polaris": "^6.0.1",
    "dotenv": "^8.2.0",
    "isomorphic-fetch": "^3.0.0",
    "koa": "^2.13.1",
    "koa-session": "^6.1.0",
    "next": "^10.0.6",
    "polaris": "^1.2.1",
    "react": "^16.14.0",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "eslint": "^7.19.0",
    "eslint-plugin-react": "^7.22.0",
    "webpack": "^5.21.2"
  }
}

 

 ( 

Reply 1 (1)

syf_
Shopify Staff
95 21 24

Hi @MAKO-Royce,

Sorry for the difficulty you experienced while going through our tutorial. Those docs were a bit dated, and using newer versions of some of the libraries in there caused stuff to break. That being said, we updated our libraries and updated the tutorials. I would also ask that you check out the Shopify CLI which quickly scaffolds an app for you.

Let me know if you have any concerns with the new tutorial.

Best,
Seth.

syf_ | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog