chore(deps): upgrade nx monorepo to v15.9.2

Author: tolgap

.eslintignore

@@ -0,0 +1 @@
+node_modules

.gitignore

@@ -39,3 +39,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Next.js
+.next

apps/api/jest.config.ts

@@ -2,14 +2,15 @@
 export default {
   displayName: 'api',
   preset: '../../jest.preset.js',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
-  },
+  globals: {},
   testEnvironment: 'node',
   transform: {
-    '^.+\\.[tj]s$': 'ts-jest',
+    '^.+\\.[tj]s$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/apps/api',

apps/api/project.json

@@ -1,15 +1,20 @@
 {
+  "name": "api",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/api/src",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/node:webpack",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@nrwl/webpack:webpack",
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "options": {
         "outputPath": "dist/apps/api",
         "main": "apps/api/src/main.ts",
-        "tsConfig": "apps/api/tsconfig.app.json"
+        "tsConfig": "apps/api/tsconfig.app.json",
+        "target": "node",
+        "compiler": "tsc"
       },
       "configurations": {
         "production": {
@@ -38,14 +43,20 @@
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/api/**/*.ts"]
+        "lintFilePatterns": [
+          "apps/api/**/*.ts"
+        ]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/api"],
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/api"
+      ],
       "options": {
         "jestConfig": "apps/api/jest.config.ts",
         "passWithNoTests": true

apps/web/.env

@@ -1 +1,2 @@
-PORT=8081
+PORT=8081
+API_URL=http://localhost:8080

apps/web/components/ProductsCard.tsx

@@ -1,12 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import {
-  Card,
-  Heading,
-  TextContainer,
-  DisplayText,
-  TextStyle,
-  Button,
-} from '@shopify/polaris';
+import { AlphaStack, Button, LegacyCard, Text } from '@shopify/polaris';
 import { Toast, useAppBridge } from '@shopify/app-bridge-react';
 import { gql, useMutation } from '@apollo/client';
 import { userLoggedInFetch } from '../utils/userLoggedInFetch';
@@ -41,26 +34,29 @@ export function ProductsCard() {
 
   const toastMarkup = hasResults && (
     <Toast
-      content="5 products created!"
+      content="1 product created!"
       onDismiss={() => setHasResults(false)}
     />
   );
 
   return (
     <>
       {toastMarkup}
-      <Card title="Product Counter" sectioned>
-        <TextContainer spacing="loose">
+      <LegacyCard title="Product Counter" sectioned>
+        <AlphaStack gap="4">
           <p>
             Sample products are created with a default title and price. You can
             remove them at any time.
           </p>
-          <Heading element="h4">
+
+          <Text as="h2" variant="headingXl">
             TOTAL PRODUCTS
-            <DisplayText size="medium">
-              <TextStyle variation="strong">{productCount}</TextStyle>
-            </DisplayText>
-          </Heading>
+          </Text>
+
+          <Text as="p" fontWeight="bold" variant="heading2xl">
+            {productCount}
+          </Text>
+
           <Button
             primary
             loading={loading}
@@ -81,10 +77,10 @@ export function ProductsCard() {
               });
             }}
           >
-            Populate 5 products
+            Populate 1 product
           </Button>
-        </TextContainer>
-      </Card>
+        </AlphaStack>
+      </LegacyCard>
     </>
   );
 }

apps/web/next.config.js

@@ -8,6 +8,14 @@ const nextConfig = {
   env: {
     SHOPIFY_API_KEY: process.env.SHOPIFY_API_KEY,
   },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${process.env.API_URL}/api/:path*`,
+      },
+    ];
+  },
   nx: {
     // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr

apps/web/pages/index.tsx

@@ -1,10 +1,10 @@
 import {
-  Card,
-  Page,
+  AlphaStack,
   Layout,
-  TextContainer,
+  LegacyCard,
   Link,
-  Heading,
+  Page,
+  Text,
 } from '@shopify/polaris';
 
 import { ProductsCard } from '../components/ProductsCard';
@@ -14,9 +14,11 @@ export default function HomePage() {
     <Page fullWidth>
       <Layout>
         <Layout.Section>
-          <Card sectioned>
-            <TextContainer spacing="loose">
-              <Heading>Nice work on building a Shopify app 🎉</Heading>
+          <LegacyCard sectioned>
+            <AlphaStack gap="4">
+              <Text as="h2" variant="headingMd">
+                Nice work on building a Shopify app 🎉
+              </Text>
               <p>
                 Your app is ready to explore! It contains everything you need to
                 get started including the{' '}
@@ -47,8 +49,8 @@ export default function HomePage() {
                 </Link>{' '}
                 📚{' '}
               </p>
-            </TextContainer>
-          </Card>
+            </AlphaStack>
+          </LegacyCard>
         </Layout.Section>
         <Layout.Section secondary>
           <ProductsCard />

apps/web/project.json

@@ -1,19 +1,22 @@
 {
+  "name": "web",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/web",
   "projectType": "application",
   "targets": {
     "build": {
       "executor": "@nrwl/next:build",
-      "outputs": ["{options.outputPath}"],
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "defaultConfiguration": "production",
       "options": {
         "root": "apps/web",
         "outputPath": "dist/apps/web"
       },
       "configurations": {
         "development": {
-          "outputPath": "tmp/apps/web"
+          "outputPath": "apps/web"
         },
         "production": {}
       }
@@ -23,8 +26,7 @@
       "defaultConfiguration": "development",
       "options": {
         "buildTarget": "web:build",
-        "dev": true,
-        "proxyConfig": "apps/web/proxy.conf.json"
+        "dev": true
       },
       "configurations": {
         "development": {
@@ -46,17 +48,23 @@
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/web"],
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/web"
+      ],
       "options": {
         "jestConfig": "apps/web/jest.config.ts",
         "passWithNoTests": true
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/web/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/web/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },