KevinDanikowski

1. Server Side Rendering

https://reactjs.org/docs/react-dom-server.html Helping Modules: https://learnnextjs.com/basics/getting-started

2. Add Headtags to semi static pages

https://hackernoon.com/react-js-cms-blog-tutorial-e090c699845b#93ad

3. Set up directory structure for server side rendering

https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf

KevinDanikowski

import React, { useEffect, useContext, useState } from 'react'
import { useRouter } from 'next/router'
import Auth from '@aws-amplify/auth'

const UserContext = React.createContext()

export const initUser = {
  user: null,
}

KevinDanikowski

import getConfig from 'next/config'
import { UserProvider, initUser } from '../lib/UserContext'
import Amplify from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'

const {
  publicRuntimeConfig: { aws, appEnv },
} = getConfig()

Amplify.configure({

KevinDanikowski

// in /pages directory
import React, { useContext, useEffect } from 'react'
import { useRouter } from 'next/router'
import { AWS_ACCESS_TOKEN } from '../utils/constants'
import Auth from '@aws-amplify/auth'
import UserContext from '../lib/UserContext'
import { Loading } from '../components/QueryHandling'

const getAccessToken = hash => {
  const hashStart = hash.substr(hash.indexOf('access_token=') + 'access_token='.length, hash.length)

KevinDanikowski

// PROTECTED PAGE
import React from 'react'
import { Loading } from '../components/QueryHandling'
import { useAuth } from '../lib/UserContext'

export default function ProtectedPage() {
  const { user } = useAuth(true)

  if (!user) {
    return <Loading />

KevinDanikowski

// I'VE COPIED WHOLE FILE FOR REFERENCE, ONLY THE HEADERS PART HAS CHANGED
// THIS FILE: https://github.com/amclin/react-project-boilerplate/blob/master/templates/default/src/utils/apollo.jsx
/* eslint-disable react/jsx-props-no-spreading, no-console */
/* FOR SERVER SIDE RENDERING APOLLO FETCHES: Use unmodifed link below.
 * https://github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/apollo.js
 * this file is modified from link above. Had some issues getting it to work with hooks.
 */
import React from 'react'
import { ApolloProvider } from '@apollo/react-hooks'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'

KevinDanikowski

// imports...
import { graphqlHTTP } from 'express-graphql'
import cors from 'cors'
import CognitoExpress from 'cognito-express'

// will fetch the pems.json
const cognitoExpress = new CognitoExpress({
  region: ENV_FILE.awsRegion,
  cognitoUserPoolId: ENV_FILE.cognitoUserPoolId,
  tokenUse: 'access', //Possible Values: access | id

KevinDanikowski

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

KevinDanikowski

{
  "subscription":{
     "create":{
        "methodName":"create",
        "httpMethod":"POST",
        "urlPrefix":"/subscriptions",
        "urlSuffix":null,
        "hasIdInUrl":false,
        "isListReq":false
     },

KevinDanikowski

import { useState, useEffect } from 'react'
import { createWorker } from 'tesseract.js'

export default function useTesseract({ tesseractLanguage = 'eng', log = false }) {
  const [tesseractWorker, setTesseractWorker] = useState(null)
  const [loadingModel, setLoadingModel] = useState(true)
  const [modelError, setModelError] = useState(false)
  const [imgResults, setImgResults] = useState({})
  const [processing, setProcessing] = useState(false)
  const [progress, setProgress] = useState(0)