diff --git a/pwa-devdocs/src/_data/venia-pwa-concept.yml b/pwa-devdocs/src/_data/venia-pwa-concept.yml index d0b438bb4f..247a309fb6 100644 --- a/pwa-devdocs/src/_data/venia-pwa-concept.yml +++ b/pwa-devdocs/src/_data/venia-pwa-concept.yml @@ -9,6 +9,9 @@ entries: - label: Venia storefront setup url: /venia-pwa-concept/setup/ + - label: Install Venia sample data + url: /venia-pwa-concept/install-sample-data/ + - label: Simple REST checkout flow url: /venia-pwa-concept/simple-rest-checkout/ diff --git a/pwa-devdocs/src/venia-pwa-concept/install-sample-data/_includes/deploy-venia-sample-data-script.md b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/_includes/deploy-venia-sample-data-script.md new file mode 100644 index 0000000000..817ab56f36 --- /dev/null +++ b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/_includes/deploy-venia-sample-data-script.md @@ -0,0 +1,107 @@ +
+Show content for deployVeniaSampleData.sh + +``` sh +#!/usr/bin/env bash +add_composer_repository () { + name=$1 + type=$2 + url=$3 + echo "adding composer repository ${url}" + ${composer} config ${composerParams} repositories.${name} ${type} ${url} +} + +add_venia_sample_data_repository () { + name=$1 + add_composer_repository ${name} github "${githubBaseUrl}/${name}.git" +} + +execute_install () { + composer='/usr/bin/env composer' + composerParams='--no-interaction --ansi' + moduleVendor='magento' + moduleList=( + module-catalog-sample-data-venia + module-configurable-sample-data-venia + module-customer-sample-data-venia + module-sales-sample-data-venia + module-tax-sample-data-venia + sample-data-media-venia + ) + githubBaseUrl='git@github.com:PMET-public' + + cd $install_path + + for moduleName in "${moduleList[@]}" + do + add_venia_sample_data_repository ${moduleName} + done + + ${composer} require ${composerParams} $(printf "${moduleVendor}/%s:dev-master@dev " "${moduleList[@]}") +} + + +skip_interactive=0 +install_path=./ + +while test $# -gt 0; do + case "$1" in + --help) + echo "Magento 2 Venia Sample data script install." + echo "if no options are passed, it will start interactive mode and ask for your Magento absolute path" + echo "" + echo "Usage:" + echo " deployVeniaSampleData.sh [options]" + echo "Options:" + echo " --help Displays this!" + echo " --yes Skip interactive mode and installs data" + echo " --path your Magento 2 absolute path, otherwise will install in current directory." + echo "" + + exit 0 + ;; + --yes) skip_interactive=1 + shift + ;; + --path*) if test $# -gt 0; then + install_path=`echo $1 | sed -e 's/^[^=]*=//g'` + fi + shift + ;; + *) break + ;; + esac + +done + + +if [ "$skip_interactive" == 1 ]; then + echo "Skipping interactive mode.." + echo "Install path ${install_path}" + execute_install +else + echo "Please specify absolute path to your Magento 2 instance" + read -p 'Magento root folder: ' install_path + + echo "Sample data will be installed there." + echo "" + read -p "Are you sure you want to continue? [y/n]" yn + + case $yn in + y ) + execute_install + ;; + n ) + echo "Sample Data instalation failed." + exit 0 + ;; + * ) + echo "Exiting..." + exit 1 + ;; + esac + +fi +``` + +
diff --git a/pwa-devdocs/src/venia-pwa-concept/install-sample-data/images/accessories-sample-data.png b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/images/accessories-sample-data.png new file mode 100644 index 0000000000..3aa528cd0f Binary files /dev/null and b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/images/accessories-sample-data.png differ diff --git a/pwa-devdocs/src/venia-pwa-concept/install-sample-data/images/sample-data-installed.png b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/images/sample-data-installed.png new file mode 100644 index 0000000000..adaf79d9ba Binary files /dev/null and b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/images/sample-data-installed.png differ diff --git a/pwa-devdocs/src/venia-pwa-concept/install-sample-data/index.md b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/index.md new file mode 100644 index 0000000000..439ed08ece --- /dev/null +++ b/pwa-devdocs/src/venia-pwa-concept/install-sample-data/index.md @@ -0,0 +1,56 @@ +--- +title: Install Venia sample data +--- + +![Accessories sample data](images/accessories-sample-data.png) + +The Venia storefront looks best when running against a Magento 2 backend with the Venia sample data installed. + +{: .bs-callout .bs-callout-info} +The sample `.env.dist` file in the Venia project already contains the URL for a Magento 2 cloud instance that has the Venia sample data installed, so +setting up a Magento 2 instance and installing sample data into it is now an optional step. + +Follow the instructions on this page to install the Venia sample data into your Magento 2 development instance. + +## Prerequisites + +* PHP 7.1 (currently one of the sample data modules is incompatible with PHP 7.2) +* System access to a Magento 2 instance + +{: .bs-callout .bs-callout-warning} +If you have the previous `magento2-sample-data` module installed, you need to [remove the sample data modules][] and re-install Magento with a clean database. + +## Step 1. Copy or create the deploy script + +If you have cloned the [PWA Studio][] repository into the same machine as your Magento instance, copy over the following PWA Studio file into the root directory of your Magento instance: + +`packages/venia-concept/deployVeniaSampleData.sh` + +If you do not have access to the PWA Studio repository, copy the following content into a file in the root directory of your Magento instance: + +{% include_relative _includes/deploy-venia-sample-data-script.md %} + +## Step 2. Execute the deploy script + +Execute the script in the root directory of your Magento instance to add the Venia sample data modules to Magento: + +```sh +bash deployVeniaSampleData.sh +``` + +## Step 3. Install the sample data modules + +Run the following command in the Magento root directory to install the Venia data from the modules: + +```sh +bin/magento setup:upgrade +``` + +## Step 4. Verify installation + +Log into the Admin section or visit the store of your Magento instance to verify the sample data installation. + +![Sample data installed in Magento](images/sample-data-installed.png) + +[remove the sample data modules]: https://devdocs.magento.com/guides/v2.3/install-gde/install/cli/install-cli-sample-data-other.html#inst-sample-remove +[PWA Studio]: https://github.com/magento-research/pwa-studio diff --git a/pwa-devdocs/src/venia-pwa-concept/setup/index.md b/pwa-devdocs/src/venia-pwa-concept/setup/index.md index b6cf0f0d5e..393342a3af 100644 --- a/pwa-devdocs/src/venia-pwa-concept/setup/index.md +++ b/pwa-devdocs/src/venia-pwa-concept/setup/index.md @@ -3,10 +3,10 @@ title: Venia storefront setup --- Venia is a PWA storefront that runs on top of an existing Magento 2 backend. -Follow the instructions on this page to setup and install the [Venia PWA concept storefront][] in your Magento 2 instance. +Follow the instructions on this page to setup and run the [Venia PWA concept storefront][]. At the end of this tutorial, you will have a working copy of the Venia storefront installed and running on top of Magento. -Use this setup to explore or develop Magento PWA components and themes. +Use this setup to explore or develop Magento PWA components and storefronts. If you experience problems with the project setup, see [Troubleshooting][] in the PWA Buildpack section. @@ -14,71 +14,10 @@ If you experience problems with the project setup, see [Troubleshooting][] in th * [NodeJS 8.x LTS][] * [Node Package Manager][] (NPM) -* A [local development instance][] of Magento 2.3 or above. +* [A running instance of Magento 2.3](#choosing-the-magento-23-backend) - The steps outline in this tutorial have been verified and are known to work with the following setups: - * Magento 2 installed using [valet-plus][] - * [Vagrant Box for Magento 2 developers][] - -## Step 1. Install Venia sample data - -The Venia storefront works best with the new Venia sample data modules installed. - -{: .bs-callout .bs-callout-warning} -If you have the previous `magento2-sample-data` module installed, you need to [remove the sample data modules][] and re-install Magento with a clean database. - -In your Magento installation root directory, create a file called `deployVeniaSampleData.sh` with the following content: - -``` sh -#!/usr/bin/env bash -composer='/usr/bin/env composer' -composerParams='--no-interaction --ansi' -moduleVendor='magento' -moduleList=( - module-catalog-sample-data-venia - module-configurable-sample-data-venia - module-customer-sample-data-venia - module-sales-sample-data-venia - module-tax-sample-data-venia - sample-data-media-venia -) -githubBasUrl='git@github.com:PMET-public' - -add_composer_repository () { - name=$1 - type=$2 - url=$3 - echo "adding composer repository ${url}" - ${composer} config ${composerParams} repositories.${name} ${type} ${url} -} - -add_venia_sample_data_repository () { - name=$1 - add_composer_repository ${name} github "${githubBasUrl}/${name}.git" -} - -for moduleName in "${moduleList[@]}" -do - add_venia_sample_data_repository ${moduleName} -done - -${composer} require ${composerParams} $(printf "${moduleVendor}/%s:dev-master@dev " "${moduleList[@]}") -``` - -Execute this script to add the Venia sample data packages to the project: - -``` sh -bash deployVeniaSampleData.sh -``` - -Run the following command to install the Venia data from the modules: - -``` -bin/magento setup:upgrade -``` - -## Step 2. Clone the PWA Studio repository +## Step 1. Clone the PWA Studio repository Clone the [PWA Studio] repository into your development environment. @@ -90,54 +29,7 @@ git clone https://github.com/magento-research/pwa-studio.git **Note:** For this tutorial, the project location is the `/Users/magedev/pwa-studio` directory. -### Special instructions for virtual machine installations - -If you are using a virtual machine, make sure it can access the new project directory and runs Magento 2.3. - -For example, if you are using the [Vagrant Box for Magento 2 developers][], use the following steps to add a synced folder to the virtual machine and configure it to use Magento 2.3. - -
-Show steps - -{: .bs-callout .bs-callout-tip} -**Tip:** -If you clone the PWA Studio project repo into the `magento2ce` directory of the Vagrant project, the project folder will already be visible to the Vagrant box and you can skip ahead to Step 3. - -1. In the Vagrant box project directory, open the `Vagrantfile` and locate the following line: - ``` - config.vm.synced_folder '.', '/vagrant', disabled: true - ``` -2. Above this line, add the following entry (substituting the project directory path with your own): - ``` - config.vm.synced_folder '/Users/magedev/pwa-studio', '/Users/magedev/pwa-studio', type: "nfs", create: true - ``` -3. If your environment does not already use Magento 2.3, copy `etc/config.yaml.dist` as `etc/config.yml` and update the following line: - ``` yml - ce: "git@github.com:magento/magento2.git" - ``` - to - ``` yml - ce: "https://github.com/magento/magento2.git::2.3-develop" - ``` -4. In that same file, update the PHP version to 7.1 by updating the following line: - ``` yml - php_version: "7.0" - ``` - to - ``` yml - php_version: "7.1" - ``` -5. Init or reset the Vagrant environment: - ``` - bash init-project - ``` - OR - ``` - bash init_project.sh -f - ``` -
- -## Step 3. Install PWA Studio dependencies +## Step 2. Install PWA Studio dependencies {: .bs-callout .bs-callout-warning} If you have an existing `node_modules` directory from a previous PWA Studio version installation, remove it to prevent installation errors. @@ -148,26 +40,38 @@ In the PWA Studio project's root directory, run the following command to install npm install ``` -## Step 4. Set environment variables +## Step 3. Specify the Magento backend server Under the `packages/venia-concept` directory, copy `.env.dist` into a new `.env` file: -**Example commands:** -``` sh -cd /Users/magedev/pwa-studio/packages/venia-concept -``` +**Example command:** ``` sh -cp .env.dist .env +cp packages/venia-concept/.env.dist packages/venia-concept/.env ``` -In the `.env` file set the value of `MAGENTO_BACKEND_URL` to the URL of your Magento development store. +In the `.env` file set the value of `MAGENTO_BACKEND_URL` to the URL of a running Magento instance. + +If you are contributing to Venia development or exploring its features, you can use the default `MAGENTO_BACKEND_URL` value. +This URL points to a cloud instance of Magento 2.3 with the [Venia sample data][] installed. **Example:** ``` text -MAGENTO_BACKEND_URL="https://magento.test/" +MAGENTO_BACKEND_URL="https://release-utkfd3a-dpfibs5yviagi.us-3.magentosite.cloud/" ``` -## Step 5. Start the server +### Choosing the Magento 2.3 backend + +The Venia storefront runs on top of any Magento 2.3 instance. +Use the default cloud instance as the backend or set up your own [local development instance][]. + +The Venia storefront has been verified to be compatible with the following local setups: + +* Magento 2 installed using [valet-plus][] +* [Vagrant Box for Magento 2 developers][] + +Don't forget to install the [Venia sample data][]! + +## Step 4. Start the server ### Build artifacts @@ -215,7 +119,7 @@ for PWA development on the frontend, use this new address. Congratulations! You have set up your development environment for the Venia storefront project. -[Venia PWA concept storefront]: https://github.com/magento-research/pwa-studio/tree/master/packages/venia-concept +[Venia PWA concept storefront]: https://github.com/magento-research/pwa-studio/tree/release/2.0/packages/venia-concept [Node Package Manager]: https://www.npmjs.com/ [NodeJS 8.x LTS]: https://nodejs.org/en/ [Vagrant Box for Magento 2 developers]: https://github.com/paliarush/magento2-vagrant-for-developers @@ -224,3 +128,4 @@ Congratulations! You have set up your development environment for the Venia stor [local development instance]: https://devdocs.magento.com/guides/v2.3/install-gde/bk-install-guide.html [valet-plus]: https://github.com/weprovide/valet-plus [remove the sample data modules]: https://devdocs.magento.com/guides/v2.3/install-gde/install/cli/install-cli-sample-data-other.html#inst-sample-remove +[Venia sample data]: {{site.baseurl}}{% link venia-pwa-concept/install-sample-data/index.md %}