A3. Download and run the node.js application - adobe-target/serverside GitHub Wiki

In this lesson, we will be using Target's Node.js SDK in a server side react application.

STEP 1: Download the app

Open the URL https://github.com/adobe-target/serverside (also bookmarked in the browser) in a new tab. Click on 'Clone or Download' and then on ‘Download ZIP’. Once the file gets downloaded, double click on it to extract the sample app. You just downloaded a sample react.js application that runs on node.

serverside-a1-download

STEP 2 : Open the app in Brackets

Open the brackets editor from the dock at the bottom of the screen. Select File > Open Folder and pick the 'serverside-testing' folder. This folder that you just downloaded and extracted will likely be under 'Downloads'.

serverside-a1-open-folder

serverside-a1-select-folder

After your select the 'serverside-testing', your brackets editor should look similar to this.

serverside-a1-post-selection

STEP 3 : Open Terminal

Click on the search icon on the top right corner of your screen. This will open spotlight search. Type 'terminal' in the search box and open the 'Terminal' application.

serverside-a1-spotlight

Once you are inside the Terminal, Type cd ~/Downloads/serverside-master to go to the folder that you just downloaded. You can type ls to list the files and make sure you are inside the right folder.

serverside-a1-terminal-cd

STEP 4 : Run the react application

Type npm run www and press enter. You should now see 'Target Node Client React App is Running on Port 5000' as the response.

serverside-a1-run-app

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

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

serverside-a1-first-launch

STEP 5 : Login to Adobe Target

Open https://adobetargetmobile.marketing.adobe.com in a new tab or window. Click on 'Sign in with Adobe ID'

Type the username and password provide on the sheet.

Click on the 'Target' card. You will now be taken to the Target user interface.

serverside-a1-target-card

Step 6 : Organize your windows and tabs

You will be switching between five 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 : This wiki which contains your lab workbook. Keep this window always open on the left so that it is easy to refer and navigate.
  • Window 2 : Adobe Marketing Cloud UI from Step 5. Have this open in a seperate window as we will be opening new tabs to other marketing cloud solutions.
  • Window 3 : The react app that you just opened in your browser. Keep this open in a new tab in one of your existing windows or a new window.
  • Window 4 : Brackets Editor
  • Window 5 : Terminal

Spend a minute and get your windows organized and this will be very helpful for the rest of the lab.