Giter VIP home page Giter VIP logo

commerce-pwa-studio's Introduction

PWA Studio documentation project

This is the documentation project for the PWA Studio documentation site. It is a Gatsby project built using the Adobe I/O Gatsby Theme.

Getting started

For local development, run the following commands:

npm install
npm run dev

commerce-pwa-studio's People

Contributors

bdenham avatar cyildirim avatar dankhrapiyush avatar dependabot[bot] avatar dmitrymatio avatar dobooth avatar dshevtsov avatar erikmarr avatar glo82145 avatar hguthrie avatar hiren2615 avatar icaraps avatar jalvarezz13 avatar jcalcaben avatar jeff-matthews avatar lucascalazans avatar medjabir avatar nrdevau avatar rafaelstz avatar shiftedreality avatar timkim avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

commerce-pwa-studio's Issues

ERROR: Repository not found magento/venia-sample-data-modules

Issue in /src/pages/guides/packages/venia/sample-data/index.md

I tried following the docs above, but it throws a message when I do step 3

git clone [email protected]:magento/venia-sample-data-modules.git ext/magento/venia-sample-data-modules

image

Issue:

ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

image

How to enable SASS support in specific cases

Issue in /src/pages/tutorials/basic-modifications/enable-sass-less/index.md

While trying to enable SASS support in a magento PWA studio project, I have experienced the following issues:

  • node-sass package is deprecated, I've used sass package instead
  • sass-loader package require webpack > 5 in newer versions; if magento pwa studio project use webpack 4.x, I've use sass-loader@10 package
  • with previous packages, the localIdentName option is not supported in webpack.config.js

To summarize, in order to enable SASS support we need to:

  1. run yarn add --dev sass sass-loader@10
  2. add the following configuration in webpack.config.js
config.module.rules.push({
        test: /\.s[ca]ss$/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    sourceMap: true,
                }
            },
            'sass-loader'
        ]
    });

I think it could be useful to report this information in the documentation.

Can't enable SASS on Adobe Magento PWA

Issue in /src/pages/tutorials/basic-modifications/enable-sass-less/index.md
Issue in injected react component, with .scss file imported and used.
The component is very simple. I've only styled a piece of text.

and the configuration that I added to webpack.config.js is:

config.module.rules.push({
     test: /\.s[ac]ss$/,
     use: [
       // Creates `style` nodes from JS strings
       "style-loader",
       // Translates CSS into CommonJS
       {
         loader: 'css-loader',
         options : {
             modules : true,
             sourceMap : true,
             localIdentName : '[name]-[local]-[hash:base64:3]'
         }
       },
       // Compiles Sass to CSS
       "sass-loader",
     ],
 })

And the error I see in my browser console is:

/src/components/Redirecting/redirecting.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./src/components/Redirecting/redirecting.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/me/my-app-folder/node_modules/sass-loader/dist/index.js:27:24)

Note : Going to https://webpack.js.org/loaders/sass-loader/, node-sass was marked as depracted, so I used the updated library: dart sass, however, I already had tried with node-sass and saw the same error.
Using the configuration suggested in this address, nothing changed, since it's not that different either:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

Broken next section link

Issue in /src/pages/tutorials/setup-storefront/issues/index.md

The link "Basic modifications" at the end of the page pointing to the next section is broken.

Fix composer.json package name

Issue in /src/pages/metapackages/open-source/index.md

The extension name is magento/pwa and not magento/magento2-pwa. Please fix this in the section "Cloud deployment extension installation"

Broken link

Issue in /src/pages/integrations/index.md

The Integration page has a broken link to "Magento" at the bottom of the page. You should probably change "Magento" to "Adobe Commerce" in the left nav as well.

Not able to clone the venia-sample-data-modules repository

Is there an existing issue for this?

  • I have searched the existing issues

Expected behavior

Visit this URL: https://developer.adobe.com/commerce/pwa-studio/metapackages/venia-sample-data/

Check the below installation step 3.
3. Clone the venia-sample-data-modules repository into your vendor directory within ext:
git clone [email protected]:magento/venia-sample-data-modules.git ext/magento/venia-sample-data-modules

I am not able to clone that repo. The above git command should work.

Actual behavior

git clone [email protected]:magento/venia-sample-data-modules.git ext/magento/venia-sample-data-modules

The above git command is not working. it gives the below error.
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights

Steps to reproduce

git clone [email protected]:magento/venia-sample-data-modules.git ext/magento/venia-sample-data-modules

The above git command should work.

Environment

  • Browser:
  • OS:

Sample code

No response

Logs

No response

Graphql url returns error

Getting error while setting up pwa studio. I believe this is because the graphql url returns some error.
https://venia-develop-**********************magentosite.cloud/graphql/ returns below error.
"An error has happened during application run. See exception log for details.
Could not write error message to log. Please use developer mode to see the message."

Because of the above issue yarn watch throws invalid json error.

Please help how to resolve this

Metapackage End of Life Messaging

Is there an existing issue for this?

  • I have searched the existing issues

What's missing?

While making some changes to the Metapackage instructions I was informed that as of M2.4.7-beta, the meta package code (GraphQLPwa and GraphQlAux) modules are going to be bundled into the core Magento repository.

If this is definitely happening, it would be good to have an info box at the head of each of the metapackage pages that alerts those reading it, so that they can prepare.

Other places to consider some messaging:

  • The page navigation could say Metapackage (Deprecated)
  • Possibly as part of the yarn/npm buildpack output - although this would be unnecessary once M2.4.7 is ready I believe

If that is the case we just need to determine the right copy for the message and do it. I'm more than happy to donate my time to do that once we've landed on the correct wording.

cc @keharper (originally informed me on this)

An example could be using the BlockQuote function in MD:

Like so
<<< END_OF_EXAMPLE


This metapackage is currently separately required in each Magento backend the PWA is configured for, but will be bundled into the Core Magento codebase as of Magento 2.4.7


END_OF_EXAMPLE

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.