Skip to content

Local Dev with MAMP or WAMP

Jump to bottom
Floria Gu edited this page May 19, 2022 · 2 revisions

This is a step-by-step guide on installing a local dev environment on a Mac OS machine for working on Tapestry. If you have a non-Mac O/S, please adjust your installation (e.g. WAMP or LAMP instead of MAMP or install piece by piece, etc.)

Here I am using MAMP v5.5 and Wordpress v.5.2.2.

MAMP and Wordpress

  1. Install MAMP (from here)
  2. In the installer, make sure to select MAMP (not MAMP PRO). To do this, press customize at the 'installation type' section of the installer and uncheck MAMP PRO.
  3. We need to locally install Wordpress. First, download Wordpress (from here).
  4. Unzip the Wordpress file to a folder of your choosing. This will be the root folder of your local dev environment.
  5. Open MAMP.
  6. Go to File > Preferences and set the root folder to your Wordpress folder from earlier.
  7. Click on start servers. The MAMP starter website should open in your browser. If it does not, navigate to ‌http://localhost:8888/MAMP/?language=English.

Turning off PHP caching in MAMP

To make your changes to PHP files take effect immediately during development, remember to disable caching. To do this in in MAMP, go to MAMP > Preferences > General and ensure you set the PHP-Cache option to "off".

Configure video upload settings in WAMP

You might encounter a 403 video upload error in the Tapestry app once you have finished setting up. However, you can address it here and now:

  • Go back to where you downloaded the wamp or wamp64 folder (typically would be in your Local Disk C:/ drive).
  • Go to wamp/bin/php/php/php.ini (should be a Configuration settings filetype).
  • Open this file make the following edits:
    • post_max_size=0
    • upload_max_filesize=512M

If the PHP file asks you to edit a different file: i.e, wamp/bin/apache/apache2.x.y/bin/php.ini, make the changes in that file instead.

Database

  1. Now we need to setup the local database. Under the MySQL section of the MAMP website, click on the phpMyAdmin link.
  2. In the phpMyAdmin website, click on New on the left sidebar. Put a database name (I put tapestry) and leave the other option the same. Click create. Your new database should appear on the left sidebar. Take note of your database name.
  3. Go back to the MAMP website, and take note of the User and Password under the MySQL section.

Wordpress

  1. Now we need to setup Wordpress. Navigate to localhost:8888, and follow the steps.
  2. When it asks for the database information, put in your database name, user, and password. Leave the other settings the same.
  3. Remember the username and password that you made during setup. This will be used to login to the Wordpress dashboard.

Tapestry

  1. Now we need to get Tapestry installed as a plugin. Navigate to your original Wordpress folder then go to wp-content/plugins.
  2. Clone the tapestry-wp repo into this folder.
  3. Go into templates/vue directory in the tapestry plugin folder and follow the instructions in the README file here
  4. Go back to the Wordpress site and login to your dashboard. Navigate to Plugins and if Tapestry was installed correctly, it should appear there. Click activate to activate the plugin.
  5. In the Wordpress admin dashboard, go to Settings > Permalinks and pick the "postname" option, then save (this is required for now - we may be able to fix it in the future to be more flexible)
  6. If everything works correctly, you should see 'Tapestries' as a tab on the sidebar.

Plugins

We use a number of WordPress plugins to extend functionality of the Tapestry app.

  1. WordPress by default installs two plugins: Hello Dolly and Akismet Anti-Spam. We can ignore these.

  2. H5P is a publicly available plugin, and can be downloaded on the WordPress site here. Unzip the folder and place it into the plugins directory, which is where tapestry-wp was installed.

  3. Both Gravity Forms and Gravity Forms Image Choices zip files can be found in the pinned post on #dev slack channel. Same with H5P, unzip and place the plugin folders in the plugin directory. When all plugins are installed and the WordPress container has been run, our plugins folder should look like:

    - /plugins
| - /akismet
| - /gf-image-choices
| - /gravityforms
| - /h5p
| - /tapestry-wp
| - hello.php
| - index.php

Once you're done, you're all set to go!

Getting External Links to Work

It's strongly recommended you complete this to get link previews working for the "External Link" content type. To do this, you will need to get an API key for LinkPreview and set a config variable first by following these instructions:

  1. Navigate to linkpreview.net and sign up to get an API Key
  2. Once logged in, press "Generate new access key" on the top right corner and copy the key
  3. In this directory (vue), make a copy of the config-sample.js file and rename it to config.js (if it doesn't exist yet)
  4. Open the config.js file and paste the API key as the value of the LINK_PREVIEW_API_KEY variable

If you complete these steps before running npm run build, you will have link previews working

Clone this wiki locally