guzmonne

import AWSDynamoDB from 'aws-sdk/clients/dynamodb'
import AWSS3 from 'aws-sdk/clients/s3'
import AWSSNS from 'aws-sdk/clients/sns'
import credentials from '../../credentials.json'

const region = 'us-east-1'

const config = {region, credentials}

export const S3 = new AWSS3(config)

guzmonne

AWS.Request Class on the JavaScript SDK

The AWS JavaScript SDK is a fantastic tool to leverage the power of the AWS services. All the features provided by the cloud giant are accesible through it. And now, after version 2.6.1 it supports webpack, which makes creating bundles of it a breeze. With webpack, we can only include the bits and pieces we need for our application. Want to add a way to upload files to S3? Ineract directly with DynamoDB? Push notification to other clients through SNS? Just add the client you need and start coding. Webpack will trim away all the unnecessary code, leaving our bundle JavaScript as slim as possible.

The best source to undestand the capabilities of the SDK is through it main documentation site. All the information for all AWS serices are listed on it. As the documentation states:

All requests made through the SDK are asynchronous and use a callback interface.

So we need a way to handle

guzmonne

import {facebookAppId} from '../../credentials.json'
/////////////////////////////////////////////////
function wrapFB(fb) {
  // PRIVATE
  /** 
   * Promise around FB.getLoginStatus method
   */
  const _getLoginStatus = () => new Promise((resolve) => {
    fb.getLoginStatus(response => resolve(response))
  })

guzmonne

import React from 'react'
import Facebook from './modules/facebook.js'

class App extends React.Component {
  constructor() {
    super()
    this.onLogin = this.onLogin.bind(this)
  }

  onLogin() {

guzmonne

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow(){
  // Create the browser window.

guzmonne

/**
 * @type Script
 * @description This node scripts runs both create-react-app script and electron
 *              development environment in order. So that when electron runs 
 *              create-react-app has all it's tools ready, including the
 *              development server.
 *              
 *              The script first checks that create-react-app socket is up and
 *              then does a GET request to the development server to check if 
 *              the development page is ready. If everthing is ok, it will start

guzmonne

// If working in development mode, install React DevTools
if (process.env.NODE_ENV === 'development'){
  const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS
  } = require('electron-devtools-installer')
  // Install chrome extensions
  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));

guzmonne

function createWindows() {
  if (wins.server === null)
    wins.server = serverWindow(() => wins.server = null)
  if (wins.main === null)
    wins.main = mainWindow(() => wins.main = null)
}

guzmonne

const {BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

/**
 * @function serverWindow
 * @description Opens the server window.
 * @param {Function} onClose Function to call after a 'closed' event.
 */
function serverWindow(onClose=function(){}) {

guzmonne

const {BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

/**
 * @function serverWindow
 * @description Opens the server window.
 * @param {Function} onClose Function to call after a 'closed' event.
 */
function serverWindow(onClose=function(){}) {