The same thing happened to me, I added it by adding the `host` to the configuration. #915

bilal42011 · 2022-07-01T07:10:46Z

The same thing happened to me, I added it by adding the host to the configuration.

A new query parameter named host has been introduced with the release of App Bridge 2.0. The base64-encoded host parameter represents the domain that is currently hosting your embedded app.

We start with the env file, it is important that you have the SHOPIFY_APP_URL defined, since it is the value that I use as host.

SHOPIFY_API_KEY=123
SHOPIFY_API_SECRET=shpss_123
SHOPIFY_API_SCOPES=read_products,write_products,read_script_tags,write_script_tags
SHOPIFY_APP_URL=https://123.ngrok.io

Now, in your next.config.js file you must take that value and send it, as well as the apiKey.

// next.config.js

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

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

module.exports = {
    webpack: (config) => {
        const env = { API_KEY: apiKey, HOST_URL: host };
        config.plugins.push(new webpack.DefinePlugin(env));
        return config;
    },
};

Finally you have to pass that host to the configuration. This must be modified with base64 and that's it. You can see your app from the store you are testing in.

import React from "react";
import App from "next/app";
import Head from "next/head";
import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/es.json";

class MyApp extends App {
    render() {
        const { Component, pageProps, shopOrigin } = this.props;

        const config = {
            apiKey: API_KEY,
            shopOrigin,
            host: Buffer.from(HOST_URL).toString("base64"),
            forceRedirect: true,
        };

        return (
            <React.Fragment>
                <Head>
                    <title>Sample App</title>
                    <meta charSet="utf-8" />
                </Head>
                <Provider config={config}>
                    <AppProvider i18n={translations}>
                        <Component {...pageProps} />
                    </AppProvider>
                </Provider>
            </React.Fragment>
        );
    }
}

MyApp.getInitialProps = async ({ ctx }) => {
    return {
        shopOrigin: ctx.query.shop,
    };
};

export default MyApp;

Originally posted by @FiliSantillan in #628 (comment)

The text was updated successfully, but these errors were encountered:

bilal42011 closed this as completed Jul 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The same thing happened to me, I added it by adding the `host` to the configuration. #915

The same thing happened to me, I added it by adding the `host` to the configuration. #915

bilal42011 commented Jul 1, 2022

The same thing happened to me, I added it by adding the host to the configuration. #915

The same thing happened to me, I added it by adding the host to the configuration. #915

Comments

bilal42011 commented Jul 1, 2022

The same thing happened to me, I added it by adding the `host` to the configuration. #915

The same thing happened to me, I added it by adding the `host` to the configuration. #915