2

I'm trying to get started with Magento's PWA tooling by following their Project setup tutorial.

I've been able to create the Node project by running

$ npx @magento/create-pwa

I've been able to install this project's dependencies by running

$ npm install

I've been able start the web server by running

$ yarn watch

However, when I visit http://0.0.0.0:10000/, I receive a Something went wrong. Please try again. error in a rendered browser window, and a slew of failed network requests. Most are server error 500s

enter image description here

Here's the results from one of the 500 errors

{
    "errors": [{
        "debugMessage": "Request content type must be application\/json",
        "message": "Internal server error",
        "category": "internal",
        "trace": [{
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/module-graph-ql\/Controller\/HttpRequestProcessor.php",
            "line": 39,
            "call": "Magento\\GraphQl\\Controller\\HttpHeaderProcessor\\ContentTypeProcessor::processHeaderValue((empty string))"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/module-graph-ql\/Controller\/GraphQl.php",
            "line": 112,
            "call": "Magento\\GraphQl\\Controller\\HttpRequestProcessor::processHeaders(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/Interception\/Interceptor.php",
            "line": 58,
            "call": "Magento\\GraphQl\\Controller\\GraphQl::dispatch(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/Interception\/Interceptor.php",
            "line": 138,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::___callParent('dispatch', array(1))"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/Interception\/Interceptor.php",
            "line": 153,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::Magento\\Framework\\Interception\\{closure}(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/generated\/code\/Magento\/GraphQl\/Controller\/GraphQl\/Interceptor.php",
            "line": 26,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::___callPlugins('dispatch', array(1), array(1))"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/App\/Http.php",
            "line": 136,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::dispatch(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/generated\/code\/Magento\/Framework\/App\/Http\/Interceptor.php",
            "line": 24,
            "call": "Magento\\Framework\\App\\Http::launch()"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/App\/Bootstrap.php",
            "line": 258,
            "call": "Magento\\Framework\\App\\Http\\Interceptor::launch()"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/pub\/index.php",
            "line": 40,
            "call": "Magento\\Framework\\App\\Bootstrap::run(instance of Magento\\Framework\\App\\Http\\Interceptor)"
        }]
    }]
}

Where do I go from here? I presume this Node.js application is trying to communicate with my Magento instance, configured during installation

#File: .env
    
MAGENTO_BACKEND_URL=http://magento-2-3-x.localhost/

Do I need to something to prepare this Magento installation and/or further configure this Node.js application with credentials?

I tried looking at the rest of the docs site but it's a bit of a corporate hodge podge of random technical details and seemingly innocuous promotional statements that hint at a lot of interdepartmental tension. I'm unsure what to do and I'm not really up for reverse engineering how all this works.

Does anyone have any advice for what to do here?

3 Answers 3

1

Does anyone have any advice for what to do here?

I would first try to get PWA Studio running against the public shared backend instance provided by Adobe.

#File: .env
    
MAGENTO_BACKEND_URL=https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/

If that works I would go ahead with creating a local domain with a signed certificate - the command for this is yarn buildpack create-custom-origin .

As to the underlying issue I can so far only guess. Your localhost domain indicates that you might be running Magento 2.3.x.

The initial npx @magento/create-pwa would have installed the latest version of PWA Studio at version 8.0. The pattern of support is current version and prior version - so 2.4.0 and 2.4.1. Source

5
  • Thank you kristof -- is there a way to know what version of PWA I have installed? Is it just the version of @magento/pwa-buildpack installed, or is there more to it? Dec 2, 2020 at 17:18
  • Unfortunately not as straight forward. PWA Studio is essentially a combination of packages. There is a special handling of npm/yarn packages that start with create (maybe best comparable to composer create-project once you have run this the project is yours and no longer tethered to the parent including no versioning relationship - it would show as 0.0.1 even though it may have been created from 7.0.0/8.0.0 indicating it's yours to maintain). Dec 2, 2020 at 21:14
  • Via github we can see that PWA Studio - tagged at version 8.0.0 includes the package pwa-buildpack at version 7.0.0 github.com/magento/pwa-studio/blob/v8.0.0/packages/… Dec 2, 2020 at 21:15
  • Thank you again Kristof -- do you happen to know if they tag the repo for every package release, or just for "PWA Studio" releases? i.e. if the @magento/create-pwa package has a version 1.7 release, would there be a github tag for that release? Dec 2, 2020 at 21:50
  • 1
    They release pretty much on schedule with Magento Core and all packages get a release at the same time (if there were any changes) and the tag is of PWA-Studio not the individual package. In the past they did have to push a hotfix for one of the packages which resulted in PWA Studio 6.0.1 (so again similar to Magento Core where the main repo gets the tag but the individual modules not). Dec 2, 2020 at 22:10
1

Could it be you've used PWA studio version 8?

If so this does not support Magento 2.3 according to https://magento.github.io/pwa-studio/technologies/magento-compatibility/

Although if this was the case you should have been informed during installation:

Since 2.1.0, PWA Studio includes a query validation step during the build process. This step reports on any GraphQL incompatibility it encounters.

Developers have two options for solving compatibility issues:

  • Upgrade or downgrade the PWA Studio version to match the Magento 2 backend version
  • Upgrade or downgrade the backend Magento 2 version to match the PWA Studio version
3
  • Thank you ben. It's a little unclear what version I have installed -- my project has "@magento/pwa-buildpack": "~7.0.0" as its dependency -- is the @magento/pwa-buildpack version equivalent to the PWA version? (i.e. do I have version seven installed?) This was installed with npx @magento/create-pwa, which doesn't appear to have a version higher than 1.2. Dec 2, 2020 at 17:17
  • 1
    I'm not sure on the answer to that one sorry
    – Ben Crook
    Dec 2, 2020 at 17:53
  • No worries Ben -- thank you for the help regardless! Dec 2, 2020 at 18:23
-1

backend url needs to be https, please try that

1
  • Does it? The setup instructions seem to indicate you can get basic functionality working via http, and that "PWA features, such as service workers and push notifications, require HTTPS secure domains, so your development environment should also be served over HTTPS to match closely with a production environment." My errors don't seem related to HTTPS at all. Is this a wild guess or is there something about my specifics that point to this being an HTTP vs. HTTPS problem? Dec 2, 2020 at 5:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.