Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Documentation] Move venia sample data installation topic #474

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions pwa-devdocs/src/_data/venia-pwa-concept.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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/

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<details markdown="1">
<summary>Show content for <code>deployVeniaSampleData.sh</code></summary>

``` 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
```

</details>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions pwa-devdocs/src/venia-pwa-concept/install-sample-data/index.md
Original file line number Diff line number Diff line change
@@ -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
151 changes: 28 additions & 123 deletions pwa-devdocs/src/venia-pwa-concept/setup/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,82 +3,21 @@ 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.

## Prerequisites

* [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.

Expand All @@ -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.

<details markdown="1">
<summary>Show steps</summary>

{: .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
```
</details>

## 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.
Expand All @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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 %}