asaschachar

/* Complete code example of App.js by the end of the video */
/* NOTE: Replace <Your_SDK_Key> with the SDK Key of your project below */
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
  createInstance,
  OptimizelyFeature,
  OptimizelyProvider,
  withOptimizely

asaschachar

Astronaut Workshop Demo Instructions

Prequisites

1. Create an Optimizely Account
2. Navigate to the codepen and follow the instructions below!
3. Turn off any ad-blockers! Ad-blockers can prevent this demo from working.

Instructions

1. Initialize Optimizely with the following code (replacing SDK Key from your development environment):

asaschachar

React Feature Flags

Set up your environment

1. Open a Terminal window.
2. Install Homebrew. Be sure to press Enter and put in your computer password when asked.
3. Install Node by running the following in the terminal: brew install node
4. Install Yarn by running the following in the terminal: brew install yarn
5. Install Visual Studio Code as your text editor (instead of vi)
6. Congrats! Your computer is now setup for coding in React. 💻
7. Navigate to the Optimizely docs and follow along the video with the next set of instructions

asaschachar

HTTP Proxy

Our SDK uses the standard node http(s) request library, which unfortunately does not automatically pull in environment-defined proxy settings. I think the current options are:

Option 1: Use a Node package for Proxying

Use global-agent to set the proxy settings for the http library so that requests from http use your proxy.

1. npm install --save global-agent
2. Before you use the Optimizely SDK:

asaschachar

React Feature Flags

1. Create a Free Rollouts Account
2. Create a React Application
3. Install the Optimizely React SDK
4. Implement a feature
5. Rollout the feature!

Requirements: Node >= 8.1 and npm >= 5.6

asaschachar

import React from 'react';
import logo from './logo.svg';
import './App.css';

import {
  createInstance,
  OptimizelyProvider,
  OptimizelyFeature,
} from '@optimizely/react-sdk'

asaschachar

import React, {Fragment} from 'react';
import { StyleSheet, View, Text } from 'react-native';

import {
  createInstance,
  OptimizelyProvider,
  OptimizelyFeature,
  enums,
  setLogger,
} from '@optimizely/react-sdk'

asaschachar

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Decision Worker
 *
 * Loads the datafile from KV Storage and makes a decision for the user.
 *
 * Decision worker deployed to: http://edge-kv-datafile.your-example-site.com/

asaschachar

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a request
 * @param {Request} request
 */
async function handleRequest(request) {
  try {

asaschachar

const optimizelyExpress = require('@optimizely/express');
const optimizely = optimizelyExpress.initialize({
  sdkKey: '<Your_SDK_Key>',
  datafileOptions: {
    autoUpdate: true,      // Indicates feature flags will be auto-updated based on UI changes 
    updateInterval: 1*1000 // 1 second in milliseconds
  },
  logLevel: 'info',        // Controls console logging. Can be 'debug', 'info', 'warn', or 'error'
});