A2. Download and Run the React app - adobe-target/clientside GitHub Wiki

In this exercise, we will download a sample React.js application. We will then deploy AT.js, Target's client side library, on this sample React application using Adobe Launch and personalize content using Target Activities.

STEP 1: Download the App

  • Open https://github.com/adobe-target/clientside/tree/summit-2018 in a new tab
  • Download the archived application using the following steps (see screenshot for assistance)
    • Click on Clone or Download
    • Select Download ZIP. This will download a file clientside-summit-2018.zip.
    • Remember the location where you downloaded the file. If you have not changed the location, it should be available in Downloads
  • Double click on clientside-summit-2018.zip, the file that was downloaded. This will extract into a folder clientside-summit-2018.

STEP 2: Open the App in Brackets

Open Brackets and import the app folder into Brackets by following these steps:

  • Open Brackets using the dock icon
  • Go to File and then Open Folder
  • Select the folder clientside-summit-2018 that you extracted in Step 1. Click on Open.

After you import clientside-summit-2018 into Brackets, your editor should look like this.

STEP 3: Run the App

We will run the React application using Terminal.

  • Click on the search icon on the top right corner of your screen. This will open spotlight search. spotlight

  • Type 'terminal' in the search box and open the 'Terminal' application.

  • Type cd ~/Downloads/clientside-summit-2018 to go to the folder that you just downloaded.

  • Type ls to list the files and make sure you are inside the right folder.

Start the React Application

  • In the terminal type npm run start and press enter.
  • The React app will launch with Compiled Successfully message as shown below. terminal3

If you are seeing any errors, please notify the instructor or a teaching assistant.

Open http://localhost:3000/ in a new tab and you should see the React App running in your browser runningapp

Step 4: Organize your windows and tabs

You will be switching between three different windows during this lab. Here is a recommended approach but feel free to organize your windows based on what you find convenient.

  • Window 1: Your browser with following tabs.
    • Tab 1: This wiki which contains your lab workbook.
    • Tab 2: The Target Application window
    • Tab 3: The React App that you just opened in your browser.
  • Window 2: Brackets Editor
  • Window 3: Terminal

Spend a minute or two on getting your windows organized and this will be very helpful for the rest of the lab.

Next Step: Deploy AT.js using Adobe Launch