Skip to content

Commit

Permalink
Revise the Venia Setup topic based on user feedback (#266)
Browse files Browse the repository at this point in the history
Changes:
- Change the title of the topic from "Setup" to "Venia theme setup"
- Change the heading of VM section to highlight they are special
instructions
- Add a list of known, working Magento 2 installation setups
- Reword introduction to make the tutorial objective clearer
  • Loading branch information
jcalcaben authored Sep 10, 2018
1 parent 49d241a commit 14a6683
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 22 deletions.
2 changes: 1 addition & 1 deletion packages/pwa-devdocs/src/_data/venia-pwa-concept.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ entries:
- label: Overview
url: /venia-pwa-concept/

- label: Setup
- label: Venia theme setup
url: /venia-pwa-concept/setup/

- label: Simple REST checkout flow
Expand Down
51 changes: 30 additions & 21 deletions packages/pwa-devdocs/src/venia-pwa-concept/setup/index.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
---
title: Setup
title: Venia theme setup
---

Follow the instructions on this page to setup the [Venia PWA concept theme] for Magento 2.
At the end of this tutorial, you will have the Venia theme project installed in Magento 2 and a local development environment set up.
Venia is a PWA theme that runs on top of an existing Magento 2 backend.
Follow the instructions on this page to setup and install the [Venia PWA concept theme][] in your Magento 2 instance.

If you experience problems with the project setup, see [Troubleshooting] in the PWA Buildpack section.
At the end of this tutorial, you will have a working copy of the Venia theme installed and running on top of Magento.
Use this setup to explore or develop Magento PWA components and themes.

If you experience problems with the project setup, see [Troubleshooting][] in the PWA Buildpack section.

## Prerequisites

* A local development instance of Magento 2.3 or above.
* [Node Package Manager] (NPM)
* [NodeJS 8.x LTS]
* [NodeJS 8.x LTS][]
* [Node Package Manager][] (NPM)
* A [local development instance][] of Magento 2.3 or above.

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][]



## Clone repository
## Step 1. Clone repository

Clone the [PWA Studio] repository into your development environment.

Expand All @@ -25,11 +35,11 @@ git clone https://github.com/magento-research/pwa-studio.git
**Note:**
For this tutorial, the project location is the `/Users/magedev/pwa-studio` directory.

### Vagrant Box instructions
### 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.
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>
Expand Down Expand Up @@ -80,15 +90,15 @@ If you clone the PWA Studio project repo into the `magento2ce` directory of the
```
</details>

## Install PWA Studio dependencies
## Step 2. Install PWA Studio dependencies

In the PWA Studio project's root directory, run the following command to install the project dependencies:

``` sh
npm install
```

## Link module
## Step 3. Link and install module

Navigate to your Magento installation's `app/code/Magento` directory and create a `Pwa` symlink folder linking to the project's `module` directory.

Expand All @@ -114,7 +124,7 @@ Install the module using the following command:
bin/magento setup:upgrade
```

## Link theme directory
## Step 4. Link theme directory

Navigate to your Magento installation's `app/design/frontend/Magento` directory and create a `venia` symlink folder linking to the project's `theme-frontend-venia` directory.

Expand All @@ -123,12 +133,12 @@ Navigate to your Magento installation's `app/design/frontend/Magento` directory
ln -s /Users/magedev/pwa-studio/packages/venia-concept venia
```

## Activate the Venia theme
## Step 5. Activate the Venia theme

Browse to the Admin section of your Magento store and configure it to use the **Magento Venia** theme.
You can find this configuration using the **Configuration** link in the **Content** tab.

## Set environment variables
## Step 6. Set environment variables

Under the Venia project's `theme-frontend-venia` directory, copy `.env.dist` into a new `.env` file and update the variables with the URL to your Magento development store.

Expand All @@ -140,16 +150,17 @@ cd /Users/magedev/pwa-studio/packages/venia-concept
cp .env.dist .env
```

## Start the development server
## Step 7. Start the development server

Use the following command to start the development server:

``` sh
npm start
```

{: .bs-callout .bs-callout-info}
**Note:**
Some users have reported using `sudo npm start` works due to permissions.
Some users have reported using `sudo npm start` to get around permissions.

After the development server is up and running, look for a similar line in the terminal output (the port will differ for your instance):

Expand All @@ -161,10 +172,6 @@ This is the new address for your PWA frontend.
You can still use the old address to access the Admin section of Magento, but
for PWA development on the frontend, use this new address.

{: .bs-callout .bs-callout-info}
**Note:**
This project is still in development and only supports the `/home` route.

Congratulations! You have set up your development environment for the Venia theme project.

[Venia PWA concept theme]: https://github.com/magento-research/pwa-studio/tree/master/packages/venia-concept
Expand All @@ -173,3 +180,5 @@ Congratulations! You have set up your development environment for the Venia them
[Vagrant Box for Magento 2 developers]: https://github.com/paliarush/magento2-vagrant-for-developers
[Troubleshooting]: {{ site.baseurl }}{% link pwa-buildpack/troubleshooting/index.md %}
[PWA Studio]: https://github.com/magento-research/pwa-studio
[local development instance]: https://devdocs.magento.com/guides/v2.3/install-gde/bk-install-guide.html
[valet-plus]: https://github.com/weprovide/valet-plus

0 comments on commit 14a6683

Please sign in to comment.