Making a Settings Page for my Node Embedded App

[egillanton]

I am new to using Node. I have followed the Guide: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

I used the Shopify CLI to Create Page called Settings and a webhook for orders/paid.

I want to be able to retrieve Store information from my Settings Page. I have no idea how to access the ctx from the routes within the Page itself.

 https://my-development-store.myshopify.com/admin/apps/my-development-app/settings

server.js

  router.post("/webhooks/orders/paid", webhook, ctx => {
    console.log("received webhook: ", ctx.state.webhook);
  });

 router.get("*", verifyRequest(), async ctx => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

pages/settings.js

import {
  AccountConnection,
  Button,
  Card,
  FormLayout,
  Layout,
  Link,
  Page,
  Select,
  TextField,
} from "@shopify/polaris";

import {
  CircleTickMajorMonotone
} from "@shopify/polaris-icons";

import { TitleBar } from "@shopify/app-bridge-react";

class SettingsPage extends React.Component {
  constructor(props) {
    super(props);
    const {shop} = ctx.session.shop;
    this.state = {
      shopifyStoreId: shop,
    };
  }
...
}
export default SettingsPage;

[paulomarg]

Hi @egillanton! The ctx variable in server.js only exists while the server is starting, so you won't be able to use it in your page.

If you want to access the current shop domain, you can read the `shopOrigin` cookie in the settings page, which is set after the store is authenticated. If you want to load other data from the store, you can use the GraphQL Admin API - for that, you can look into steps 5 and 6 of the tutorial.

Hope this helps!

[egillanton · Accepted solution]

I found a solution to my problem.

server/server.js

  router.get("/settings", verifyRequest(), async (ctx) => {
    if (typeof ctx.query.shop !== "undefined") {
      await app.render(ctx.req, ctx.res, "/settings", ctx.query);
      ctx.respond = true;
      ctx.res.statusCode = 200;
    }
  });

pages/settings.js

class SettingsPage extends React.Component {
  // Prepares the props sent to the constructor
  // Server sends the ctx.query as the parameter
  static async getInitialProps(ctx_query) {
    const shop = ctx_query.query.shop;
    // If executed on Server Side
    if (typeof shop === "undefined") {
      return {};
    }
    console.log("shop:", shop);
....
}