{"id":3635,"date":"2019-02-26T03:54:25","date_gmt":"2019-02-26T03:54:25","guid":{"rendered":"http:\/\/myprojects.advchaweb.com\/?p=3635"},"modified":"2019-07-22T04:11:01","modified_gmt":"2019-07-22T04:11:01","slug":"install-magento-2-3-pwa-studio-on-ubuntu-16-04","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2019\/02\/26\/install-magento-2-3-pwa-studio-on-ubuntu-16-04\/","title":{"rendered":"Install Magento 2.3 PWA Studio On Ubuntu 16.04"},"content":{"rendered":"<p>Ref: https:\/\/magento-research.github.io\/pwa-studio\/venia-pwa-concept\/setup\/<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"GETmSvAoFO\"><p><a href=\"https:\/\/webkul.com\/blog\/magento2-3-pwa-studio-setup\/\">Magento2.3 PWA Studio Setup<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/webkul.com\/blog\/magento2-3-pwa-studio-setup\/embed\/#?secret=GETmSvAoFO\" data-secret=\"GETmSvAoFO\" width=\"600\" height=\"338\" title=\"&#8220;Magento2.3 PWA Studio Setup&#8221; &#8212; Webkul Blog\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote data-secret=\"EdO9YEYQy7\" class=\"wp-embedded-content\"><p><a href=\"https:\/\/www.mavenecommerce.com\/ecommerce\/prepared-try-benefits-magento-pwa-studio\/\">Are you prepared to try all benefits of Magento PWA Studio?<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/www.mavenecommerce.com\/ecommerce\/prepared-try-benefits-magento-pwa-studio\/embed\/#?secret=EdO9YEYQy7\" data-secret=\"EdO9YEYQy7\" width=\"600\" height=\"338\" title=\"&#8220;Are you prepared to try all benefits of Magento PWA Studio?&#8221; &#8212; Maven EN\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><br \/>\nhttps:\/\/hackernoon.com\/getting-started-with-magento-pwa-studio-with-poc-c54c33f8d038<\/p>\n<p>Check Requirements:<br \/>\nIt say my working environment need:<br \/>\nNodeJS &gt;=10.14.1 LTS<br \/>\nYarn &gt;=1.13.0<br \/>\nAnother source say: &#8216;You must have a version of node.js &gt;= 8.0.0, and a version of npm &gt;= 5.0.0. The latest LTS versions of both are recommended.&#8217;<br \/>\nCheck my current:<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230$ node -v\r\nv8.9.4\r\nteddy@teddy:~\/Documents\/works\/mce230$ npm -v\r\n6.7.0\r\nteddy@teddy:~\/Documents\/works\/mce230$ yarn -v\r\n1.12.3<\/pre>\n<p>I use NVM (http:\/\/myprojects.advchaweb.com\/index.php\/2018\/01\/24\/ubuntu-16-04-3-installation-problem-and-solution\/) to install node js. It seems my current didn&#8217;t fit the requirements. I need to install node js version 10.x.x and update yarn and npm.<br \/>\nCHECK INSTALLED NODE VERSION:<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230$ nvm ls\r\n-&gt;       v8.9.4\r\n        v8.15.0\r\ndefault -&gt; 8.9.4 (-&gt; v8.9.4)\r\nnode -&gt; stable (-&gt; v8.15.0) (default)\r\nstable -&gt; 8.15 (-&gt; v8.15.0) (default)\r\niojs -&gt; N\/A (default)\r\nlts\/* -&gt; lts\/dubnium (-&gt; N\/A)\r\nlts\/argon -&gt; v4.9.1 (-&gt; N\/A)\r\nlts\/boron -&gt; v6.16.0 (-&gt; N\/A)\r\nlts\/carbon -&gt; v8.15.0\r\nlts\/dubnium -&gt; v10.15.1 (-&gt; N\/A)<\/pre>\n<p>or use &#8216;nvm ls-remote&#8217; to see all the node js list and version.<br \/>\nUse nvm to install node js v10..15.1. it&#8217;s a latest LTS version for v10.x.<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230$ nvm install 10.15.1\r\nDownloading and installing node v10.15.1...\r\nDownloading https:\/\/nodejs.org\/dist\/v10.15.1\/node-v10.15.1-linux-x64.tar.xz...\r\n######################################################################## 100,0%\r\nComputing checksum with sha256sum\r\nChecksums matched!\r\nNow using node v10.15.1 (npm v6.4.1)<\/pre>\n<p>It also make it the new version as an active node js version!<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230$ node -v\r\nv10.15.1<\/pre>\n<p>or use &#8216;nvm use 10.15.1&#8217;<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230$ nvm ls\r\n         v8.9.4\r\n        v8.15.0\r\n-&gt;     v10.15.1\r\ndefault -&gt; 8.9.4 (-&gt; v8.9.4)\r\nnode -&gt; stable (-&gt; v10.15.1) (default)\r\nstable -&gt; 10.15 (-&gt; v10.15.1) (default)\r\niojs -&gt; N\/A (default)\r\nlts\/* -&gt; lts\/dubnium (-&gt; v10.15.1)\r\nlts\/argon -&gt; v4.9.1 (-&gt; N\/A)\r\nlts\/boron -&gt; v6.16.0 (-&gt; N\/A)\r\nlts\/carbon -&gt; v8.15.0\r\nlts\/dubnium -&gt; v10.15.1\r\nteddy@teddy:~\/Documents\/works\/mce230$ nvm use 10.15.1\r\nNow using node v10.15.1 (npm v6.4.1)\r\nteddy@teddy:~\/Documents\/works\/mce230$ nvm ls\r\n         v8.9.4\r\n        v8.15.0\r\n-&gt;     v10.15.1\r\ndefault -&gt; 8.9.4 (-&gt; v8.9.4)\r\nnode -&gt; stable (-&gt; v10.15.1) (default)\r\nstable -&gt; 10.15 (-&gt; v10.15.1) (default)\r\niojs -&gt; N\/A (default)\r\nlts\/* -&gt; lts\/dubnium (-&gt; v10.15.1)\r\nlts\/argon -&gt; v4.9.1 (-&gt; N\/A)\r\nlts\/boron -&gt; v6.16.0 (-&gt; N\/A)\r\nlts\/carbon -&gt; v8.15.0\r\nlts\/dubnium -&gt; v10.15.1\r\nteddy@teddy:~\/Documents\/works\/mce230$ node -v\r\nv10.15.1<\/pre>\n<p>but npm version now is v6.4.1. Yarn already installed for the previous node js version but not yet for the current v10.15.1 version. I need to install it again. NOTE: Yarn is more recommended than npm!<br \/>\nInstall Yarn (https:\/\/yarnpkg.com\/en\/docs\/install#debian-stable)<br \/>\nNOTE: I need to uninstall &#8216;cmdtest&#8217; first (https:\/\/github.com\/yarnpkg\/yarn\/issues\/2821).<\/p>\n<pre class=\"lang:default decode:true\">sudo apt remove cmdtest\r\ncurl -sS https:\/\/dl.yarnpkg.com\/debian\/pubkey.gpg | sudo apt-key add -\r\necho \"deb https:\/\/dl.yarnpkg.com\/debian\/ stable main\" | sudo tee \/etc\/apt\/sources.list.d\/yarn.list\r\nsudo apt update\r\nsudo apt install yarn<\/pre>\n<p>Check yarn version<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230$ yarn -v\r\n1.13.0<\/pre>\n<p>INSTALL Magento 2.3 Backend<br \/>\nor INSTALL PWA Studio First??? &#8211;&gt; I prefer to install the backend first!<br \/>\nNOTE: I need to use composer to install the backend.<br \/>\ncheck the composer version<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa$ composer -V\r\nComposer version 1.6.2 2018-01-05 15:28:41<\/pre>\n<p>When I use this composer version to download and install magento<\/p>\n<pre class=\"lang:default decode:true\">composer create-project --repository=https:\/\/repo.magento.com\/ magento\/project-community-edition:2.3.0 \/home\/teddy\/Documents\/works\/mce230-pwa<\/pre>\n<p>it can&#8217;t download from repo. it&#8217;s did nothing after I supplied the repo.magento.com account for a long time! I NEED TO UPDATE COMPOSER!<br \/>\nBut when I want to update the composer, I got an error &#8216;SHA384 is not supported by your openssl extension, could not verify the phar file integrity&#8217;<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo composer selfupdate\r\n[sudo] password for teddy: \r\nUpdating to version 1.8.4 (stable channel).\r\n   Downloading (100%)         \r\n\r\n                                                                               \r\n  [RuntimeException]                                                           \r\n  SHA384 is not supported by your openssl extension, could not verify the pha  \r\n  r file integrity                                                             \r\n                                                                               \r\n\r\nself-update [-r|--rollback] [--clean-backups] [--no-progress] [--update-keys] [--stable] [--preview] [--snapshot] [--set-channel-only] [--] [&lt;version&gt;]<\/pre>\n<p>Based on this link https:\/\/github.com\/composer\/composer\/issues\/7669, to fix this problem I need to manually download and install composer. Follow this https:\/\/getcomposer.org\/download\/ to download and install composer. It&#8217;s almost same. But to install composer system wide, use &#8216;sudo php composer-setup.php &#8211;install-dir=\/usr\/local\/bin &#8211;filename=composer&#8217; instead of &#8216;php composer-setup.php&#8217;<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa$ php -r \"copy('https:\/\/getcomposer.org\/installer', 'composer-setup.php');\"\r\nteddy@teddy:~\/Documents\/works\/mce230-pwa$ php -r \"if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;\"\r\nInstaller verified\r\nteddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo php composer-setup.php --install-dir=\/usr\/local\/bin --filename=composer\r\n[sudo] password for teddy: \r\nAll settings correct for using Composer\r\nDownloading...\r\n\r\nComposer (version 1.8.4) successfully installed to: \/usr\/local\/bin\/composer\r\nUse it: php \/usr\/local\/bin\/composer\r\n\r\nteddy@teddy:~\/Documents\/works\/mce230-pwa$ composer -V\r\nCannot create cache directory \/home\/teddy\/.composer\/cache\/repo\/https---repo.packagist.org\/, or directory is not writable. Proceeding without cache\r\nComposer version 1.8.4 2019-02-11 10:52:10\r\nteddy@teddy:~\/Documents\/works\/mce230-pwa$ php -r \"unlink('composer-setup.php');\"<\/pre>\n<p>To avoid warning like this:<\/p>\n<pre class=\"lang:default decode:true \">Cannot create cache directory \/home\/teddy\/.composer\/cache\/repo\/https---repo.packagist.org\/, or directory is not writable. Proceeding without cache<\/pre>\n<p>so do like this:<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~$ sudo chmod 777 -R \/home\/teddy\/.composer\/<\/pre>\n<p>NOTE: Also it recommended to install prestissimo (composer plugin) from https:\/\/github.com\/hirak\/prestissimo<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~$ composer global require hirak\/prestissimo\r\nChanged current directory to \/home\/teddy\/.composer\r\nUsing version ^0.3.8 for hirak\/prestissimo\r\n.\/composer.json has been updated\r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)\r\nPackage operations: 1 install, 0 updates, 0 removals\r\n  - Installing hirak\/prestissimo (0.3.8): Downloading (100%)         \r\nWriting lock file\r\nGenerating autoload files\r\n<\/pre>\n<p>I tried to install magento 2.3 via composer but failed for some reasons. Like the packages can&#8217;t be downloaded or it took a long time so I had to cancel it. Probably my slow internet speed and\/or the magento repo problems affected the installation as well. I tried to download and install on the afternoon without no progress. The last time I successfully installed it when I tried it on the evening! So here is the working command:<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~$ composer create-project --repository=https:\/\/repo.magento.com\/ magento\/project-community-edition \/home\/teddy\/Documents\/works\/mce230-pwa -vvv<\/pre>\n<p>Anyway it took almost 3 hours to complete the command!<br \/>\nNote: I stripped &#8216;magento\/project-community-edition:2.3.0&#8217; from the above command to make sure I got the latest version! It&#8217;s not mean it&#8217;d not work if I put the version back!<br \/>\nSO &#8216;\/home\/teddy\/Documents\/works\/mce230-pwa&#8217; is a Magento installation directory.<\/p>\n<p>The next step is to install Magento by Command Line<br \/>\nFirst, go to the magento 2.3.0 root directory<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~$ cd Documents\/works\/mce230-pwa\/<\/pre>\n<p>Then run this command like this: Use https url like &#8216;https:\/\/mce230-pwa.test\/&#8217; for PWA because PWA only works with SSL???<\/p>\n<pre class=\"lang:default decode:true\">php bin\/magento setup:install --base-url=https:\/\/mce230-pwa.test\/ --base-url-secure=https:\/\/mce230-pwa.test\/ --db-host=localhost --db-name=mce230_pwa --db-user=root --db-password=webkul --admin-firstname=John --admin-lastname=Doe --admin-email=test@webkul.com --admin-user=admin --admin-password=admin123 --backend-frontname=admin_magento --language=en_US --currency=USD --timezone=Asia\/Tbilisi --cleanup-database --use-rewrites=1<\/pre>\n<span class=\"rcp-restricted-content-message\">SORRY, ONLY ADMIN CAN SHOW THIS!<\/span><br \/>\nMake sure you already create a new database &#8216;mce230_pwa&#8217;. Also match the database credential!<br \/>\n<span class=\"rcp-restricted-content-message\">SORRY, ONLY ADMIN CAN SHOW THIS!<\/span><br \/>\nSO I completed the installation of magento 2.3 backend. Can I open it on the browser http:\/\/localhost\/mce230-pwa ??? Should I set it on the web server like nginx or apache? Or it only can be run via node js server??? &#8211;&gt; I&#8217;m gonna setup nginx for running it. But I need to create self-signed certificate first for enabling ssl (http:\/\/myprojects.advchaweb.com\/index.php\/2019\/02\/09\/create-self-signed-certificate-with-nginx-on-ubuntu-16-04\/)<br \/>\nCreate a new file<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/self_signed_cert$ sudo gedit mce230-pwa.test.conf<\/pre>\n<p>Here is the file content:<\/p>\n<pre class=\"lang:default decode:true\">[req]\r\ndefault_bits       = 2048\r\ndefault_keyfile    = f.key\r\ndistinguished_name = req_distinguished_name\r\nreq_extensions     = req_ext\r\nx509_extensions    = v3_ca\r\n\r\n[req_distinguished_name]\r\ncountryName                 = Country Name (2 letter code)\r\ncountryName_default         = US\r\nstateOrProvinceName         = State or Province Name (full name)\r\nstateOrProvinceName_default = New York\r\nlocalityName                = Locality Name (eg, city)\r\nlocalityName_default        = Rochester\r\norganizationName            = Organization Name (eg, company)\r\norganizationName_default    = localhost\r\norganizationalUnitName      = organizationalunit\r\norganizationalUnitName_default = Development\r\ncommonName                  = Common Name (e.g. server FQDN or YOUR name)\r\ncommonName_default          = localhost\r\ncommonName_max              = 64\r\n\r\n[req_ext]\r\nsubjectAltName = @alt_names\r\n\r\n[v3_ca]\r\nsubjectAltName = @alt_names\r\n\r\n[alt_names]\r\nDNS.1   = mce230-pwa.test\r\nDNS.2   = 127.0.0.1<\/pre>\n<p>Create the Certificate using OpenSSL<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/self_signed_cert$ sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout mce230-pwa.test.key -out mce230-pwa.test.crt -config mce230-pwa.test.conf\r\nGenerating a 2048 bit RSA private key\r\n........................................................................................+++++\r\n.............................................................+++++\r\nwriting new private key to 'mce230-pwa.test.key'\r\n-----\r\nYou are about to be asked to enter information that will be incorporated\r\ninto your certificate request.\r\nWhat you are about to enter is what is called a Distinguished Name or a DN.\r\nThere are quite a few fields but you can leave some blank\r\nFor some fields there will be a default value,\r\nIf you enter '.', the field will be left blank.\r\n-----\r\nCountry Name (2 letter code) [US]:\r\nState or Province Name (full name) [New York]:\r\nLocality Name (eg, city) [Rochester]:\r\nOrganization Name (eg, company) [localhost]:\r\norganizationalunit [Development]:\r\nCommon Name (e.g. server FQDN or YOUR name) [localhost]:<\/pre>\n<p>It&#8217;ll create two new files. There are mce230-pwa.test.crt and mce230-pwa.test.key. Then Copy those files to the Certificates folder on Ubuntu<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/self_signed_cert$ sudo cp mce230-pwa.test.crt \/etc\/ssl\/certs\/\r\nteddy@teddy:~\/Documents\/self_signed_cert$ sudo cp mce230-pwa.test.key \/etc\/ssl\/private\/<\/pre>\n<p>OK. Now setup the nginx config. Create the config file<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo gedit \/etc\/nginx\/sites-available\/mce230-pwa.test<\/pre>\n<p>Here is the content:<\/p>\n<pre class=\"lang:default decode:true\">server {\r\n    listen 80;\r\n    listen 443 ssl http2; \r\n    listen [::]:443 ssl http2; \r\n    server_name mce230-pwa.test;\r\n\r\n    ssl_certificate \/etc\/ssl\/certs\/mce230-pwa.test.crt; \r\n    ssl_certificate_key \/etc\/ssl\/private\/mce230-pwa.test.key; \r\n    ssl_protocols TLSv1.2 TLSv1.1 TLSv1;\r\n    \r\n    set $MAGE_ROOT \/home\/teddy\/Documents\/works\/mce230-pwa\/pub;\r\n\r\n    root $MAGE_ROOT;\r\n\r\n    index index.php;\r\n    autoindex off;\r\n    charset UTF-8;\r\n    error_page 404 403 = \/errors\/404.php;\r\n    #add_header \"X-UA-Compatible\" \"IE=Edge\";\r\n    client_max_body_size 100M;\r\n\r\n    # PHP entry point for setup application\r\n    location ~* ^\/setup($|\/) {\r\n        root $MAGE_ROOT;\r\n        location ~ ^\/setup\/index.php {\r\n            fastcgi_split_path_info ^(.+?\\.php)(\/.*)$;\r\n            fastcgi_buffers 1024 4k; \r\n            fastcgi_read_timeout 600s; \r\n            fastcgi_connect_timeout 600s;\r\n            fastcgi_pass unix:\/run\/php\/php7.2-fpm.sock; #FOR AWS SERVER\r\n            #fastcgi_pass 127.0.0.1:9000;\r\n            #fastcgi_index index.php;\r\n            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\r\n            include fastcgi_params;\r\n        }\r\n\r\n        location ~ ^\/setup\/(?!pub\/). {\r\n            deny all;\r\n        }\r\n\r\n        location ~ ^\/setup\/pub\/ {\r\n            add_header X-Frame-Options \"SAMEORIGIN\";\r\n        }\r\n    }\r\n\r\n    # PHP entry point for update application\r\n    location ~* ^\/update($|\/) {\r\n        root $MAGE_ROOT;\r\n\r\n        location ~ ^\/update\/index.php {\r\n            fastcgi_split_path_info ^(\/update\/index.php)(\/.+)$;\r\n            fastcgi_pass unix:\/run\/php\/php7.2-fpm.sock; #FOR AWS SERVER\r\n            #fastcgi_pass 127.0.0.1:9000;\r\n            fastcgi_index index.php;\r\n            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\r\n            fastcgi_param PATH_INFO $fastcgi_path_info;\r\n            include fastcgi_params;\r\n        }\r\n\r\n        # Deny everything but index.php\r\n        location ~ ^\/update\/(?!pub\/). {\r\n            deny all;\r\n        }\r\n\r\n        location ~ ^\/update\/pub\/ {\r\n            add_header X-Frame-Options \"SAMEORIGIN\";\r\n        }\r\n    }\r\n\r\n    location \/ {\r\n        try_files $uri $uri\/ \/index.php?$args;\r\n    }\r\n\r\n    location \/pub\/ {\r\n        location ~ ^\/pub\/media\/(downloadable|customer|import|theme_customization\/.*\\.xml) {\r\n            deny all;\r\n        }\r\n        alias $MAGE_ROOT\/pub\/;\r\n        add_header X-Frame-Options \"SAMEORIGIN\";\r\n    }\r\n\r\n\r\n    location ~ ^\/pub\/static\/version {\r\n        rewrite ^\/pub\/static\/(version\\d*\/)?(.*)$ \/pub\/static\/$2 last;\r\n    }\r\n\r\n    location \/static\/ {\r\n        # Uncomment the following line in production mode\r\n        # expires max;\r\n\r\n        # Remove signature of the static files that is used to overcome the browser cache\r\n        location ~ ^\/static\/version {\r\n            rewrite ^\/static\/(version\\d*\/)?(.*)$ \/static\/$2 last;\r\n        }\r\n\r\n        location ~* \\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {\r\n            add_header Cache-Control \"public\";\r\n            add_header X-Frame-Options \"SAMEORIGIN\";\r\n            expires +1y;\r\n\r\n            if (!-f $request_filename) {\r\n                rewrite ^\/static\/(version\\d*\/)?(.*)$ \/static.php?resource=$2 last;\r\n            }\r\n        }\r\n\r\n        location ~* \\.(zip|gz|gzip|bz2|csv|xml)$ {\r\n            add_header Cache-Control \"no-store\";\r\n            add_header X-Frame-Options \"SAMEORIGIN\";\r\n            expires off;\r\n\r\n            if (!-f $request_filename) {\r\n                rewrite ^\/static\/(version\\d*\/)?(.*)$ \/static.php?resource=$2 last;\r\n            }\r\n        }\r\n\r\n        if (!-f $request_filename) {\r\n            rewrite ^\/static\/(version\\d*\/)?(.*)$ \/static.php?resource=$2 last;\r\n        }\r\n\r\n        add_header X-Frame-Options \"SAMEORIGIN\";\r\n    }\r\n\r\n    location \/media\/ {\r\n        try_files $uri $uri\/ \/get.php?$args;\r\n\r\n        location ~ ^\/media\/theme_customization\/.*\\.xml {\r\n            deny all;\r\n        }\r\n\r\n        location ~* \\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {\r\n            add_header Cache-Control \"public\";\r\n            add_header X-Frame-Options \"SAMEORIGIN\";\r\n            expires +1y;\r\n            try_files $uri $uri\/ \/get.php?$args;\r\n        }\r\n\r\n        location ~* \\.(zip|gz|gzip|bz2|csv|xml)$ {\r\n            add_header Cache-Control \"no-store\";\r\n            add_header X-Frame-Options \"SAMEORIGIN\";\r\n            expires off;\r\n            try_files $uri $uri\/ \/get.php?$args;\r\n        }\r\n\r\n        add_header X-Frame-Options \"SAMEORIGIN\";\r\n    }\r\n\r\n    location \/media\/customer\/ {\r\n        deny all;\r\n    }\r\n\r\n    location \/media\/downloadable\/ {\r\n        deny all;\r\n    }\r\n\r\n    location \/media\/import\/ {\r\n        deny all;\r\n    }\r\n\r\n    # PHP entry point for main application\r\n    location ~ (index|get|static|report|404|503)\\.php$ {\r\n        try_files $uri =404;\r\n        fastcgi_pass unix:\/run\/php\/php7.2-fpm.sock; #FOR AWS SERVER\r\n        #fastcgi_pass 127.0.0.1:9000;\r\n        fastcgi_buffers 1024 4k;\r\n\r\n        fastcgi_read_timeout 600s;\r\n        fastcgi_connect_timeout 600s;\r\n        # to configure profiler in Magento 2\r\n        #fastcgi_param  MAGE_PROFILER html;\r\n\r\n        fastcgi_index index.php;\r\n        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\r\n        #include fastcgi_params;\r\n        #FOR DEVELOPMENT MODE ONLY - BEGIN\r\n        fastcgi_param MAGE_IS_DEVELOPER_MODE true;\r\n        fastcgi_param PHP_VALUE  display_startup_errors=on;\r\n        fastcgi_param PHP_VALUE  display_errors=on;\r\n        fastcgi_param PHP_VALUE  html_errors=on;\r\n        fastcgi_param PHP_VALUE  log_errors=on;\r\n        fastcgi_param PHP_VALUE  error_log=\/home\/teddy\/Documents\/works\/mce230-pwa\/var\/log\/system.log;\r\n        #FOR DEVELOPMENT MODE ONLY - END\r\n        include fastcgi_params;\r\n        #FOR DEBUGGING WITH XDEBUG - BEGIN\r\n        #fastcgi_read_timeout 600;\r\n        #FOR DEBUGGING WITH XDEBUG - END\r\n    }\r\n\r\n    gzip on;\r\n    gzip_disable \"msie6\";\r\n\r\n    gzip_comp_level 6;\r\n    gzip_min_length 1100;\r\n    gzip_buffers 16 8k;\r\n    gzip_proxied any;\r\n    gzip_types\r\n    text\/plain\r\n    text\/css\r\n    text\/js\r\n    text\/xml\r\n    text\/javascript\r\n    application\/javascript\r\n    application\/x-javascript\r\n    application\/json\r\n    application\/xml\r\n    application\/xml+rss\r\n    image\/svg+xml;\r\n    gzip_vary on;\r\n\r\n    # Banned locations (only reached if the earlier PHP entry point regexes don't match)\r\n    location ~* (\\.php$|\\.htaccess$|\\.git) {\r\n        deny all;\r\n    }\r\n}<\/pre>\n<p>NOTE: I set $MAGE_ROOT TO &#8216;pub&#8217; DIR LIKE &#8216;set $MAGE_ROOT \/home\/teddy\/Documents\/works\/mce230-pwa\/pub&#8217; INSTEAD OF JUST &#8216;set $MAGE_ROOT \/home\/teddy\/Documents\/works\/mce230-pwa&#8217;. SO PWA THEME CAN DISPLAY THE CATEGORY &amp; PRODUCTS IMAGE!<br \/>\nEnable file config<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo ln -s \/etc\/nginx\/sites-available\/mce230-pwa.test \/etc\/nginx\/sites-enabled\/mce230-pwa.test<\/pre>\n<p>Register the host on my system<\/p>\n<pre class=\"lang:default decode:true \">sudo gedit \/etc\/hosts<\/pre>\n<p>Like this:<\/p>\n<pre class=\"lang:default decode:true \">...\r\n127.0.0.1 \tmce230-pwa.test\r\n...<\/pre>\n<p>CHECK THE NGINX SETTING AND RESTART IT:<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo nginx -t\r\nnginx: [warn] conflicting server name \"\" on 0.0.0.0:80, ignored\r\nnginx: the configuration file \/etc\/nginx\/nginx.conf syntax is ok\r\nnginx: configuration file \/etc\/nginx\/nginx.conf test is successful\r\nteddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo service nginx restart<\/pre>\n<p>Set file permission and owner:<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo su\r\nroot@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa# find var vendor pub\/static pub\/media app\/etc -type f -exec chmod g+w {} \\;\r\nroot@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa# find var vendor pub\/static pub\/media app\/etc -type f -exec chmod g+w {} \\;\r\nroot@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa# chown -R :www-data .\r\nroot@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa# chmod u+x bin\/magento\r\nroot@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa# chown www-data -R var\/ pub\/ app\/etc\/ setup\/ generated\/\r\nroot@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa# chmod -R 777 var\/ pub\/ app\/etc\/ setup\/ generated\/<\/pre>\n<p>Because the installation is already done by composer, then compile!<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo su -s \/bin\/bash www-data \r\nwww-data@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa$ php bin\/magento setup:upgrade --keep-generated &amp;&amp; php bin\/magento setup:di:compile &amp;&amp; php bin\/magento setup:static-content:deploy -f --language en_AU --language en_US &amp;&amp; php bin\/magento indexer:reindex &amp;&amp; php bin\/magento cache:clean &amp;&amp; php bin\/magento cache:flush<\/pre>\n<p>Give it a try! the frontend: https:\/\/mce230-pwa.test\/ &#8211;&gt; No product displayed because I didn&#8217;t install the sample data!<br \/>\nand the backend: https:\/\/mce230-pwa.test\/admin_magento<br \/>\nuser: admin<br \/>\npassword: admin123<\/p>\n<p>Now is the steps for installing PWA Studio.<br \/>\nclone it from the repository on current magento 2.3.0 root directory<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ git clone https:\/\/github.com\/magento-research\/pwa-studio.git\r\nCloning into 'pwa-studio'...\r\nremote: Enumerating objects: 87, done.\r\nremote: Counting objects: 100% (87\/87), done.\r\nremote: Compressing objects: 100% (55\/55), done.\r\nremote: Total 14067 (delta 38), reused 57 (delta 30), pack-reused 13980\r\nReceiving objects: 100% (14067\/14067), 13.48 MiB | 2.31 MiB\/s, done.\r\nResolving deltas: 100% (8559\/8559), done.\r\nChecking connectivity... done.<\/pre>\n<p>You will see the\u00a0pwa-studio\u00a0directory in\u00a0\/mce230-pwa<br \/>\nEnter into this directoy:<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ cd pwa-studio\/<\/pre>\n<p>Then run &#8216;yarn install&#8217;. It recommended to use it than &#8216;npm install&#8217;<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ yarn install<\/pre>\n<p>Then Specify the Magento backend server in .env file. you can see the\u00a0.env.dist\u00a0file in<br \/>\n\/mce230-wa\/pwa-studio\/packages\/venia-concept\/\u00a0directory. If you are not<br \/>\nable see, enable show hidden files. Now create\u00a0.env\u00a0file from this\u00a0env.dist<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ cp packages\/venia-concept\/.env.dist packages\/venia-concept\/.env<\/pre>\n<p>Open this .env file and find\u00a0MAGENTO_BACKEND_URL. Here configure your local Magento 2.3 instance, my case it is:<\/p>\n<pre class=\"lang:default decode:true\">MAGENTO_BACKEND_URL=\"https:\/\/mce230-pwa.test\/\"<\/pre>\n<p>Now install sample data\u00a0for venia-theme to make it good looking. Find the\u00a0deployVeniaSampleData.sh\u00a0file in<br \/>\n\/mce230-pwa\/pwa-studio\/packages\/venia-concept\/\u00a0directory. and copy this file in your Magento root directory. Now it must look like<br \/>\n\/mce230-pwa\/deployVeniaSampleData.sh\u00a0Now run:<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ bash deployVeniaSampleData.sh \r\nPlease specify absolute path to your Magento 2 instance\r\nMagento root folder: \/home\/teddy\/Documents\/works\/mce230-pwa\r\nSample data will be installed there.\r\n\r\nAre you sure you want to continue? [y\/n]y\r\nadding composer repository git@github.com:PMET-public\/module-catalog-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-configurable-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-customer-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-sales-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-tax-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/sample-data-media-venia.git\r\n.\/composer.json has been updated                                                  \r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)                                     \r\nPackage operations: 6 installs, 0 updates, 0 removals\r\n  - Installing magento\/module-tax-sample-data-venia (dev-master c3fe5d5): Cloning c3fe5d5527 from cache\r\n  - Installing magento\/module-customer-sample-data-venia (dev-master e8717cd): Cloning e8717cd296 from cache\r\n  - Installing magento\/module-configurable-sample-data-venia (dev-master 1126eab): Cloning 1126eab4e0 from cache\r\n  - Installing magento\/module-catalog-sample-data-venia (dev-master f294079): Cloning f294079c9f from cache\r\n  - Installing magento\/module-sales-sample-data-venia (dev-master ac1a957): Cloning ac1a95730b from cache\r\n  - Installing magento\/sample-data-media-venia (dev-master 9c6308c): Cloning 9c6308c258 from cache\r\nPackage phpunit\/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.\r\nWriting lock file\r\nGenerating autoload files<\/pre>\n<p>This was tricky because I need several times to make it works. I also need to create a new file &#8216;auth.json&#8217; and put it in the mce230-pwa directory because I got this error : &#8216;Could not authenticate against github.com&#8217;. ref is here https:\/\/www.bountysource.com\/issues\/64327845-add-shell-script-to-install-venia-sample-data-modules-via-composer. This error can be fixed with providing the github personal api token (https:\/\/github.blog\/2013-05-16-personal-api-tokens\/). So to get the token, go to your github account (https:\/\/github.com\/settings\/tokens) then generate &#8216;personal access token&#8217;. For the scopes, I think I need to select one or all of the options. At first, I didn&#8217;t select any scope and the bash script didn&#8217;t work. Then I selected all of them and the bash script worked again!. After you got the token, put it in auth.json file. Here is auth.json file content:<\/p>\n<pre class=\"lang:default decode:true \">{\r\n    \"github-oauth\": {\r\n        \"github.com\": \"xxxxx\"\r\n    }\r\n}<\/pre>\n<p>Replace &#8220;xxxxx&#8221; with your github personal access token!<br \/>\n<span class=\"rcp-restricted-content-message\">SORRY, ONLY ADMIN CAN SHOW THIS!<\/span><\/p>\n<p>&lt;ERROR_I_GOT_PREVIOUSLY&gt;<br \/>\nThe problem when I forgot to provide the magento 2.3 root directory<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ bash deployVeniaSampleData.sh \r\nPlease specify absolute path to your Magento 2 instance\r\nMagento root folder: \r\nSample data will be installed there.\r\n\r\nAre you sure you want to continue? [y\/n]y\r\nadding composer repository git@github.com:PMET-public\/module-catalog-sample-data-venia.git\r\n\r\n                                                                   \r\n  [RuntimeException]                                               \r\n  File \".\/composer.json\" cannot be found in the current directory<\/pre>\n<p>The problem when I should create auth.json (https:\/\/www.bountysource.com\/issues\/64327845-add-shell-script-to-install-venia-sample-data-modules-via-composer)<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa$ bash deployVeniaSampleData.sh \r\nPlease specify absolute path to your Magento 2 instance\r\nMagento root folder: \/home\/teddy\/Documents\/works\/mce230-pwa\r\nSample data will be installed there.\r\n\r\nAre you sure you want to continue? [y\/n]y\r\nadding composer repository git@github.com:PMET-public\/module-catalog-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-configurable-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-customer-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-sales-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/module-tax-sample-data-venia.git\r\nadding composer repository git@github.com:PMET-public\/sample-data-media-venia.git\r\nReading composer.json of magento\/module-configurable-sample-data-venia (catimageReading composer.json of magento\/module-configurable-sample-data-venia (develop).\/composer.json has been updated                                                \r\nLoading composer repositories with package information\r\n                                                                           \r\n                                             \r\n  [Composer\\Downloader\\TransportException]   \r\n  Could not authenticate against github.com<\/pre>\n<p>&lt;\/ERROR_I_GOT_PREVIOUSLY&gt;<\/p>\n<p>OK. After successful installation compile again:<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa$ sudo su -s \/bin\/bash www-data \r\nwww-data@teddy:\/home\/teddy\/Documents\/works\/mce230-pwa$ php bin\/magento setup:upgrade --keep-generated &amp;&amp; php bin\/magento setup:di:compile &amp;&amp; php bin\/magento setup:static-content:deploy -f --language en_AU --language en_US &amp;&amp; php bin\/magento indexer:reindex &amp;&amp; php bin\/magento cache:clean &amp;&amp; php bin\/magento cache:flush<\/pre>\n<p>Then I opened the frontend https:\/\/mce230-pwa.test &#8211;&gt; No product on the homepage<br \/>\nThen I found some venia products on the links like on https:\/\/mce230-pwa.test\/venia-accessories.html<br \/>\nBut the products image CAN&#8217;T BE DISPLAYED!<br \/>\nThe images refer to the cache directory in \/mce230-pwa\/pub\/media\/catalog\/product\/cache<br \/>\nI can fix this problem by regenerating the images (https:\/\/magento.stackexchange.com\/questions\/175224\/regenerate-catalog-cache-images-issues). So I run<\/p>\n<pre class=\"lang:default decode:true \">php bin\/magento catalog:image:resize<\/pre>\n<p>WARNING: It&#8217;d take a long time to complete it depend on how many the images and the computer resource. To regenerate the images in the sample venia theme on my pc, it took almost 30 minutes for 1287 products!<\/p>\n<p>But I can&#8217;t find &#8216;venia&#8217; theme on the admin page! I tried to create the symlink like<\/p>\n<pre class=\"lang:default decode:true\">ln -s $(pwd)\/pwa-studio\/packages\/venia-concept app\/design\/frontend\/Magento\/venia<\/pre>\n<p>or just copied &#8216;\/pwa-studio\/packages\/venia-concept&#8217; into &#8216;app\/design\/frontend\/Magento&#8217; then rename &#8216;venia-concept&#8217; to &#8216;venia&#8217;. But none of them display the venia theme in the admin themes content! &#8211;&gt; NEED TO LEARN THIS LATER!<\/p>\n<p>Then go back to pwa-studio directory\u00a0\/mce230-pwa\/pwa-studio\u00a0and<br \/>\nstart Server. I run &#8216;yarn run build&#8217; instead of &#8216;npm run build&#8217;. But before running this command, make sure the magento mode is developer.<\/p>\n<pre class=\"lang:default decode:true \">php bin\/magento deploy:mode:set developer\r\nphp bin\/magento deploy:mode:show<\/pre>\n<p>Then run &#8216;yarn run build&#8217;<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ yarn run build\r\nyarn run v1.12.3\r\n$ yarn workspaces run build\r\n$ concurrently --raw yarn:build:cjs yarn:build:esm\r\n$ BABEL_ENV=production babel src --out-dir dist --root-mode 'upward' --source-maps\r\n$ BABEL_ENV=development babel src --out-dir esm --root-mode 'upward' --source-maps\r\nSuccessfully compiled 32 files with Babel.\r\nSuccessfully compiled 49 files with Babel.\r\n$ yarn run clean\r\n$ rimraf dist\r\n$ babel src --out-dir dist --root-mode 'root' --source-maps --copy-files\r\nSuccessfully compiled 16 files with Babel.\r\n$ yarn run clean &amp;&amp; yarn run build:esm &amp;&amp; yarn run validate-queries &amp;&amp; yarn run build:prod\r\n$ rimraf dist esm\r\n$ BABEL_ENV=development babel src --out-dir esm --root-mode 'upward' --source-maps --copy-files\r\nSuccessfully compiled 289 files with Babel.\r\n$ node .\/validate-queries.js\r\nUsing environment variables from .env\r\nValidating queries based on schema at https:\/\/mce230-pwa.test\/graphql...\r\nRetrieved introspection query. Configuring validator...\r\nAll queries valid against attached GraphQL API.\r\n$ webpack -p --color --progress --profile --env.mode production\r\nUsing environment variables from .env\r\n(node:11989) Warning: N-API is an experimental feature and could change at any time.\r\n2582ms building                                                                   \r\n15ms finish module graph                            \r\n2ms sealing                                \r\n0ms basic dependencies optimization \r\n14ms dependencies optimization                          \r\n0ms advanced dependencies optimization \r\n0ms after dependencies optimization \r\n30ms chunk graph\r\n0ms after chunk graph                          \r\n0ms optimizing \r\n0ms basic module optimization \r\n0ms module optimization \r\n0ms advanced module optimization \r\n0ms after module optimization \r\n8ms basic chunk optimization                             \r\n0ms chunk optimization \r\n17ms advanced chunk optimization                        \r\n0ms after chunk optimization \r\n0ms module and chunk tree optimization \r\n0ms after module and chunk tree optimization \r\n0ms basic chunk modules optimization \r\n164ms chunk modules optimization                         \r\n0ms advanced chunk modules optimization \r\n0ms after chunk modules optimization \r\n1ms module reviving                 \r\n6ms module order optimization                                \r\n0ms advanced module order optimization \r\n0ms before module ids \r\n2ms module ids \r\n7ms module id optimization \r\n0ms chunk reviving                 \r\n0ms chunk order optimization                               \r\n0ms before chunk ids \r\n1ms chunk id optimization                          \r\n9ms after chunk id optimization \r\n0ms record modules                 \r\n1ms record chunks                 \r\n25ms hashing\r\n8ms content hashing                         \r\n0ms after hashing \r\n0ms record hash \r\n0ms module assets processing \r\n274ms chunk assets processing\r\n2ms additional chunk assets processing \r\n0ms recording \r\n0ms additional asset processing \r\n141ms chunk asset optimization            \r\n0ms after chunk asset optimization \r\n0ms asset optimization \r\n0ms after asset optimization \r\n1ms after seal \r\n61ms emitting                      \r\n2ms after emitting                       \r\nHash: e086111e0a6e6e0d71b2\r\nVersion: webpack 4.28.4\r\nTime: 3382ms\r\nBuilt at: 2019-02-27 15:01:28\r\n                                                Asset       Size  Chunks                    Chunk Names\r\n                 8244c0fdc106dd57437fa5a48d27ab0d.svg   3.35 KiB          [emitted]         \r\n                                  asset-manifest.json   1.15 KiB          [emitted]         \r\n                         js\/0-bebb1f1c7d078e2bad24.js   7.82 KiB       0  [emitted]         \r\n                        js\/10-a5d8d75a48ce5257fd58.js   4.04 KiB      10  [emitted]         \r\n                        js\/11-cd336d8904836814884c.js    319 KiB      11  [emitted]  [big]  \r\n                         js\/8-2e8d88db09cd5934dd6d.js   42.9 KiB       8  [emitted]         \r\n                         js\/9-e38f788e72e6015cabfd.js   14.4 KiB       9  [emitted]         \r\n js\/RootCmp_CATEGORY__default-649dc8d317d85ba4c0af.js   18.5 KiB       1  [emitted]         RootCmp_CATEGORY__default\r\n js\/RootCmp_CMS_PAGE__default-6ba8f30cf16dc0ccae77.js   8.34 KiB       2  [emitted]         RootCmp_CMS_PAGE__default\r\n js\/RootCmp_NOTFOUND__default-895142cabb5abf216ceb.js    1.2 KiB       3  [emitted]         RootCmp_NOTFOUND__default\r\n  js\/RootCmp_PRODUCT__default-793f69342213bcdcb7c6.js   29.8 KiB       4  [emitted]         RootCmp_PRODUCT__default\r\n   js\/RootCmp_SEARCH__default-c3541804ad272ac28122.js  206 bytes       5  [emitted]         RootCmp_SEARCH__default\r\n                                         js\/client.js    447 KiB       6  [emitted]  [big]  client\r\n             js\/vendor~client-3a997f5cf70f78e105a7.js    233 KiB       7  [emitted]         vendor~client\r\nprecache-manifest.fe953fa07dbd49a5646a1fbce8fb6e32.js  808 bytes          [emitted]         \r\n                                                sw.js   1.34 KiB          [emitted]         \r\nEntrypoint client [big] = js\/vendor~client-3a997f5cf70f78e105a7.js js\/client.js\r\n [18] ..\/peregrine\/dist\/index.js + 7 modules 18.6 KiB {6} [built]\r\n      | ..\/peregrine\/dist\/index.js 389 bytes [built]\r\n      |     [] 156ms -&gt; factory:119ms building:10ms = 285ms\r\n      | ..\/peregrine\/dist\/RestApi\/index.js 94 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n      | ..\/peregrine\/dist\/util\/index.js 102 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n      | ..\/peregrine\/dist\/util\/simplePersistence.js 2.44 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 247ms -&gt; factory:57ms building:12ms dependencies:165ms = 766ms\r\n      | ..\/peregrine\/dist\/RestApi\/Magento2\/index.js 84 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 247ms -&gt; factory:166ms building:20ms = 718ms\r\n      | ..\/peregrine\/dist\/RestApi\/Magento2\/M2ApiRequest.js 11.3 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 247ms -&gt; [] 186ms -&gt; factory:80ms building:34ms dependencies:71ms = 903ms\r\n      | ..\/peregrine\/dist\/RestApi\/Magento2\/M2ApiResponseError.js 2.35 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 247ms -&gt; [] 186ms -&gt; [] 114ms -&gt; factory:103ms building:60ms dependencies:2ms = 997ms\r\n      | ..\/peregrine\/dist\/RestApi\/Magento2\/MulticastCache.js 1.87 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 247ms -&gt; [] 186ms -&gt; [] 114ms -&gt; factory:103ms building:60ms dependencies:2ms = 997ms\r\n [24] \/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/node_modules\/apollo-link\/lib\/index.js + 4 modules 8.12 KiB {6} [built]\r\n      |    5 modules\r\n [26] .\/src\/drivers\/index.js 2.5 KiB [built]\r\n      [] 156ms -&gt; factory:119ms building:10ms = 285ms\r\n [48] .\/src\/actions\/app\/index.js 68 bytes [built]\r\n      [] 156ms -&gt; factory:119ms building:10ms = 285ms\r\n [71] .\/src\/actions\/app\/asyncActions.js 3.25 KiB {6} [built]\r\n      [] 156ms -&gt; [48] 129ms -&gt; factory:27ms building:141ms dependencies:0ms = 453ms\r\n [88] .\/src\/actions\/app\/actions.js 277 bytes {6} [built]\r\n      [] 156ms -&gt; [48] 129ms -&gt; factory:27ms building:141ms dependencies:0ms = 453ms\r\n[112] ..\/peregrine\/dist\/List\/index.js 153 bytes [built]\r\n      [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n[154] \/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/node_modules\/react-redux\/es\/index.js + 14 modules 27.9 KiB {7} [built]\r\n      |    15 modules\r\n[162] ..\/peregrine\/dist\/Router\/index.js 195 bytes [built]\r\n      [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n[296] ..\/peregrine\/dist\/ContainerChild\/index.js 77 bytes [built]\r\n      [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n[297] ..\/peregrine\/dist\/Page\/index.js 67 bytes [built]\r\n      [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n[298] ..\/peregrine\/dist\/Price\/index.js 68 bytes [built]\r\n      [] 156ms -&gt; [] 129ms -&gt; factory:215ms building:32ms = 532ms\r\n[304] .\/src\/index.css 1.1 KiB {6} [built]\r\n      [] 156ms -&gt; factory:119ms building:10ms = 285ms\r\n[305] \/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/node_modules\/css-loader??ref--6-1!.\/src\/index.css 2.11 KiB {6} [built]\r\n      [] 156ms -&gt; [304] 129ms -&gt; factory:40ms building:28ms = 353ms\r\n[513] .\/src\/index.js + 97 modules 276 KiB {6} [built]\r\n      | .\/src\/index.js 1.96 KiB [built]\r\n      |     factory:33ms building:123ms = 156ms\r\n      | .\/src\/store.js 308 bytes [built]\r\n      |     [] 156ms -&gt; factory:119ms building:10ms = 285ms\r\n      | .\/src\/drivers\/adapter.js 3.58 KiB [built]\r\n      |     [] 156ms -&gt; [26] 129ms -&gt; factory:252ms building:35ms dependencies:176ms = 748ms\r\n      | .\/src\/middleware\/index.js 255 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; factory:251ms building:12ms dependencies:222ms = 770ms\r\n      | .\/src\/middleware\/errorHandler.js 6.89 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; factory:251ms building:12ms dependencies:222ms = 770ms\r\n      | .\/src\/reducers\/index.js 621 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; factory:251ms building:12ms dependencies:222ms = 770ms\r\n      | .\/src\/util\/composeEnhancers.js 367 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; factory:251ms building:12ms dependencies:222ms = 770ms\r\n      | ..\/peregrine\/dist\/Router\/Router.js 1.97 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [162] 247ms -&gt; factory:57ms building:33ms dependencies:502ms = 1124ms\r\n      | .\/src\/util\/createErrorRecord.js 2.11 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:226ms building:31ms = 805ms\r\n      | .\/src\/reducers\/app.js 1.35 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:73ms building:73ms dependencies:156ms = 850ms\r\n      | .\/src\/reducers\/cart.js 2.46 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:73ms building:73ms dependencies:156ms = 850ms\r\n      | .\/src\/reducers\/catalog.js 4.17 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:73ms building:73ms dependencies:156ms = 850ms\r\n      | .\/src\/reducers\/checkout.js 5.12 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:73ms building:73ms dependencies:156ms = 850ms\r\n      | .\/src\/reducers\/directory.js 585 bytes [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:73ms building:73ms dependencies:156ms = 850ms\r\n      | .\/src\/reducers\/user.js 2.48 KiB [built]\r\n      |     [] 156ms -&gt; [] 129ms -&gt; [] 263ms -&gt; factory:73ms building:73ms dependencies:156ms = 850ms\r\n      |     + 83 hidden modules\r\n    + 648 hidden modules\r\n\r\nWARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).\r\nThis can impact web performance.\r\nAssets: \r\n  js\/client.js (447 KiB)\r\n  js\/11-cd336d8904836814884c.js (319 KiB)\r\n\r\nWARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\r\nEntrypoints:\r\n  client (681 KiB)\r\n      js\/vendor~client-3a997f5cf70f78e105a7.js\r\n      js\/client.js\r\n\r\n$ echo 'Skipping upward-js build...'\r\nSkipping upward-js build...\r\n$ echo 'Skipping upward-spec build...'\r\nSkipping upward-spec build...\r\n$ rimraf \".\/packages\/*\/{esm,dist}\/{,**\/}__*__\"\r\nDone in 20.50s.<\/pre>\n<p>Need to recompile again if needed (NO NEED!)<\/p>\n<pre class=\"lang:default decode:true\">php bin\/magento setup:upgrade --keep-generated &amp;&amp; php bin\/magento setup:di:compile &amp;&amp; php bin\/magento setup:static-content:deploy -f --language en_AU --language en_US &amp;&amp; php bin\/magento indexer:reindex &amp;&amp; php bin\/magento cache:clean &amp;&amp; php bin\/magento cache:flush<\/pre>\n<p>Run server, Use any of the following commands from the project root directory to start: yarn run watch:venia<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ yarn run watch:venia\r\nyarn run v1.12.3\r\n$ yarn workspace @magento\/venia-concept run watch; cd - &gt;\/dev\/null\r\n$ webpack-dev-server --progress --color --env.mode development\r\nUsing environment variables from .env\r\n(node:12131) Warning: N-API is an experimental feature and could change at any time.\r\nEmitting no ServiceWorker in development mode. To enable development mode for ServiceWorkers, pass `enableServiceWorkerDebugging: true` to the ServiceWorkerPlugin configuration.\r\n 10% building 1\/1 modules 0 activeCannot add image optimization middleware due to dependencies that are not installed or are not compatible with this environment:\r\n- @magento\/express-sharp: Reason: The module '\/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/node_modules\/sharp\/build\/Release\/sharp.node'\r\n- @magento\/express-sharp: Reason: expressSharp is not a function\r\n\r\nImages will be served uncompressed.\r\n\r\nIf possible, install additional tools to build NodeJS native dependencies:\r\nhttps:\/\/github.com\/nodejs\/node-gyp#installation\r\n\u2139 \uff62wdm\uff63: wait until bundle finished: \r\n\u2139 \uff62wds\uff63: Project is running at https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/\r\n\u2139 \uff62wds\uff63: webpack output is served from https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/\r\n\u2139 \uff62wdm\uff63: Version: webpack 4.28.4                                                  \r\nTime: 5788ms\r\nBuilt at: 2019-02-27 15:03:18\r\n\u2139 \uff62wdm\uff63: Compiled successfully.\r\n\r\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n\u2502                                                                                                \u2502\r\n\u2502          PWADevServer ready at https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/          \u2502\r\n\u2502   GraphQL Playground ready at https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/graphiql   \u2502\r\n\u2502                                                                                                \u2502\r\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/pre>\n<p>OR run &#8216;yarn run watch:all&#8217;<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ yarn run watch:all\r\nyarn run v1.12.3\r\n$ node scripts\/watch-all.js\r\n  \u2714 initial build of @magento\/pwa-buildpack\r\n  \u2714 initial build of @magento\/peregrine\r\n  \u2714 initial build of webpack-dev-server\r\n\r\n  \u26a0  Launching webpack-dev-server\r\n\r\nUsing environment variables from .env\r\n(node:26502) Warning: N-API is an experimental feature and could change at any time.\r\nEmitting no ServiceWorker in development mode. To enable development mode for ServiceWorkers, pass `enableServiceWorkerDebugging: true` to the ServiceWorkerPlugin configuration.\r\nCannot add image optimization middleware due to dependencies that are not installed or are not compatible with this environment:\r\n- @magento\/express-sharp: Reason: The module '\/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/node_modules\/sharp\/build\/Release\/sharp.node'\r\n- @magento\/express-sharp: Reason: expressSharp is not a function\r\n\r\nImages will be served uncompressed.\r\n\r\nIf possible, install additional tools to build NodeJS native dependencies:\r\nhttps:\/\/github.com\/nodejs\/node-gyp#installation\r\n\u2139 \uff62wdm\uff63: wait until bundle finished: \r\n\u2139 \uff62wds\uff63: Project is running at https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/\r\n\u2139 \uff62wds\uff63: webpack output is served from https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/\r\n\u2139 \uff62wdm\uff63: Version: webpack 4.28.4\r\nTime: 3962ms\r\nBuilt at: 2019-02-27 20:36:35\r\n\u2139 \uff62wdm\uff63: Compiled successfully.\r\n\r\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n\u2502                                                                                                \u2502\r\n\u2502          PWADevServer ready at https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/          \u2502\r\n\u2502   GraphQL Playground ready at https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/graphiql   \u2502\r\n\u2502                                                                                                \u2502\r\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n\r\n  \u26a0  Press q to exit the dev server.\r\n<\/pre>\n<p>Then open it on your browser: https:\/\/magento-venia-concept-2hrkd.local.pwadev:8328\/<br \/>\nOK. But it can&#8217;t show the products image!!!<br \/>\nTemporary solution for this problem is COPY THE CATEGORY AND PRODUCT IMAGES IN CATALOG DIR FROM pub\/media\/catalog TO the magento root directory &#8211;&gt; NOT GOOD IF THERE IS NEW PRODUCT AND IMAGE! SO HERE IS THE BETTER WAY! SET MAGENTO ROOT DIRECTORY TO &#8216;pub&#8217; DIR. MODIFY nginx CONFIG FILE<\/p>\n<pre class=\"lang:default decode:true \">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ sudo gedit \/etc\/nginx\/sites-available\/mce230-pwa.test<\/pre>\n<p>THEN MODIFY $MAGE_ROOT FROM<\/p>\n<pre class=\"lang:default decode:true \">...\r\nset $MAGE_ROOT \/home\/teddy\/Documents\/works\/mce230-pwa;\r\n...<\/pre>\n<p>TO<\/p>\n<pre class=\"lang:default decode:true \">...\r\nset $MAGE_ROOT \/home\/teddy\/Documents\/works\/mce230-pwa\/pub;\r\n...<\/pre>\n<p>I THINK IT NEED TO RECOMPILE!<\/p>\n<p>&lt;ERROR_IF_PWA_NOT_SSL&gt;<\/p>\n<pre class=\"lang:default decode:true\">teddy@teddy:~\/Documents\/works\/mce230-pwa\/pwa-studio$ yarn run watch:venia\r\nyarn run v1.12.3\r\n$ yarn workspace @magento\/venia-concept run watch; cd - &gt;\/dev\/null\r\n$ webpack-dev-server --progress --color --env.mode development\r\nUsing environment variables from .env\r\n(node:7222) Warning: N-API is an experimental feature and could change at any time.\r\nCreating a local development domain requires temporary administrative privileges.\r\nPlease enter the password for teddy on teddy.\r\n[sudo] password for teddy: \r\nPlease close Firefox before continuing\r\nError: [pwa-buildpack:Utilities:configureHost.js] Could not setup development domain: \r\nError: Timed out waiting for SSL certificate generation and trust.\r\n    at Timeout.setTimeout [as _onTimeout] (\/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/packages\/pwa-buildpack\/dist\/Utilities\/configureHost.js:56:45)\r\n    at ontimeout (timers.js:475:11)\r\n    at tryOnTimeout (timers.js:310:5)\r\n    at Timer.listOnTimeout (timers.js:270:5)\r\n    at configureHost (\/home\/teddy\/Documents\/works\/mce230-pwa\/pwa-studio\/packages\/pwa-buildpack\/dist\/Utilities\/configureHost.js:165:11)\r\n    at &lt;anonymous&gt;\r\nDone in 31.67s.<\/pre>\n<p>It need SSL!<br \/>\n&lt;\/ERROR_IF_PWA_NOT_SSL&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ref: https:\/\/magento-research.github.io\/pwa-studio\/venia-pwa-concept\/setup\/ Magento2.3 PWA Studio Setup Are you prepared to try all benefits of Magento PWA Studio? https:\/\/hackernoon.com\/getting-started-with-magento-pwa-studio-with-poc-c54c33f8d038 Check Requirements: It say my working environment need: NodeJS &gt;=10.14.1 LTS Yarn &gt;=1.13.0 Another source say: &#8216;You must have a version of node.js &gt;= 8.0.0, and a version of npm &gt;= 5.0.0. The latest LTS versions of &hellip; <a href=\"https:\/\/myprojects.advchaweb.com\/index.php\/2019\/02\/26\/install-magento-2-3-pwa-studio-on-ubuntu-16-04\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Install Magento 2.3 PWA Studio On Ubuntu 16.04&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,98,13,17,78],"tags":[],"class_list":["post-3635","post","type-post","status-publish","format-standard","hentry","category-magento","category-magento-tutorial","category-tutorial","category-ubuntu","category-ubuntu-16-04"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":24,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3635\/revisions"}],"predecessor-version":[{"id":4230,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3635\/revisions\/4230"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=3635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}