Configurazione PWA in Magento 2.3.0

1. Come possiamo usarlo in Magento 2.3.0?
2. In Magento 2.3.0, sostengono che PWA è supportato?
3. Come possiamo iniziare con questa fantastica funzionalità per provare la novità?

Per ulteriori riferimenti

** Cominciamo con l'installazione di Magento 2.3 con PWA **

1. Immettere il seguente comando in DIR / var / www / html / (m230 è la mia directory Magento 2.3):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m230

2. Installa Magento dalla riga di comando:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-password=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Crea un tema pwa di base che sarà il genitore per [tema PWA Venia.] [25]

• Per ora consente di clonare il repository di temi pwa base.

4. Crea una directory app/design/frontend/Magento/pwae copia tutti i file e le directory del tema di base qui.

• Controlliamo che il tema di base sia disponibile o meno.

• Run: php bin/magento setup:upgrade

• E vai al tuo Magento Admin-> Contenuto-> Temi

5. Scarica il progetto PWA studio.

6. Passare alla directory principale dell'installazione di Magento e creare una cartella Pwa symlink che si colleghi alla directory del modulo del progetto (pwa-studio / pacchetti / pwa-module).

• da questa directory eseguo il mio comando - / var / www / html / m230

• Questa è una directory dove la mia fonte scaricata da pwa è / var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio/packages/pwa-module app/code/Magento/Pwa

7. Collega anche la directory dei temi. Naviga nella directory root della tua installazione Magento e crea una cartella Pwa symlink che si collega alla directory del modulo del progetto (pwa-studio / pacchetti / venia-concept).

ln -s /var/www/html/PWA/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia

8. Ora vai alla directory venia-concept del tuo progetto pwa-studio, copia .env.distin un nuovo .envfile e aggiorna le variabili con l'URL al tuo negozio di sviluppo Magento.

cd /var/www/html/PWA/pwa-studio/packages/venia-concept

cp .env.dist .env

9. Installa il tema venia e il modulo Pwa:

run: php bin/magento setup:upgrade

possiamo vedere che il tema venia è stato installato con successo.

10. Configura il tema venia da admin->Content->Configuration

11. Passare alla /var/www/html/PWA/pwa-studiocorsa path ( ):

npm install

o

npm install webpack-dev-server -g

12. E infine naviga verso /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Congratulazioni! Hai impostato il tuo ambiente di sviluppo per il progetto tematico Venia.

Se hai bisogno di qualcosa pronto per la produzione al più presto: ho installato e usato il sistema Vue Store Front (sistema open source, la community disponibile attraverso le risposte lente alle domande, anche se ho avuto qualche incostante, ma nel complesso il sistema è molto utile in questa fase dell'integrazione PWA)

-> Usa Vue anziché React. E utilizza anche ElasticSearch e Docker. Nel complesso, questo sistema si collega principalmente a Magento 2 tramite Rest API (e c'è un inizio con GraphQL)

per iniziare:

Git clone https://github.com/DivanteLtd/vue-storefront

cd vue-storefront
yarn install
npm run installer

e quindi yarn devper svuotare la cache ma le modifiche vue dovrebbero essere compilate dopo pochi secondi come un processo di controllo.

Naturalmente, anche il PWA che Magento 2 costruisce è eccezionale, ma sfortunatamente si sta muovendo velocemente e non è chiaro quando sarà pronto per competere con VS (sopra il sistema).

-> Ho trovato meglio imparare graphql e forse più facile da personalizzare, ma era probabilmente per la ragione sbagliata al momento, questo PWA aveva dei CSS grezzi nei file di reazione.

https://magento-research.github.io/pwa-studio/venia-pwa-concept/setup/

npm install

sulla tua installazione magento 2.3, devi installare Venia Sample Data (vedi https://magento-research.github.io/pwa-studio/venia-pwa-concept/install-sample-data/ )

cd packages/venia-concept && npm run build

cd ../.. && npm run watch:venia

e qui dovresti avere un PWA nuovo di zecca pronto: sembra muoversi velocemente come un mese fa, c'era un sacco di WIP e oggi posso vedere per esempio l'integrazione sass che mancava. Questa seconda opzione potrebbe essere migliore se sei pronto per imparare e costruire questo PWA con la comunità Magento

Prima di tutto installa Node js ultima versione usando il seguente comando

- curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
- sudo apt-get install -y nodejs
- sudo apt install npm

Ora vai alla directory principale di Magento:

- cd var/www/html/pwa-magento/

Scarica la directory del clone PWA e installa npm in questa directory usando i seguenti comandi

- git clone https://github.com/magento-research/pwa-studio.git
- cd pwa-studio/
- sudo npm install
- cp packages/venia-concept/.env.dist packages/venia-concept/.env
- sudo npm run build

==========================================

se npx non trova errore PWA magento 2.3

- sudo npm i -g npx

se l'errore viene trovato in questo modo: Impossibile trovare il modulo 'envalid', quindi eseguire il comando seguente

- sudo npm install i envalid
- sudo npm install envalid

in caso di errore del genere, eseguire il comando seguente: lerna ERR! npm run build -s è uscito 1 in "@ magento / venia-concept"

- sudo npm restart
- sudo npm run stage:venia
- sudo npm cache clean -f
- sudo npm install -g n
- sudo n stable / sudo n latest (depends on version)

===========================================

- sudo npm i @magento/pwa-buildpack
- sudo npm i @magento/upward-js
- sudo npm i @magento/venia-concept

- sudo npm run build
- sudo npm run watch:venia
- sudo npm run watch:all

Puoi andare al seguente blog.

Come installare Magento 2.3 PWA

Inoltre, spiegherà in dettaglio come utilizzare Magento 2.3 PWA per il tuo sito Web e come utilizzarlo.

Controlla la demo PWA di Working Magento 2.3