Kevin Danikowski KevinDanikowski

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

Feel free to contact me at robert.balicki@gmail.com 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.

	{
	"aav": {
	"to": [{ "symbol": "en", "model": "Helsinki-NLP/opus-mt-aav-en" }],
	"from": [{ "symbol": "en", "model": "Helsinki-NLP/opus-mt-en-aav" }]
	},
	"aed": {
	"to": [{ "symbol": "es", "model": "Helsinki-NLP/opus-mt-aed-es" }],
	"from": [{ "symbol": "es", "model": "Helsinki-NLP/opus-mt-es-aed" }]
	},
	"af": {

	const noHyphenLangs = ['ko', 'ja', 'zh-cn', 'zh-tw', 'ar', 'th']
	const formatTranslationIntoPath = (text, symbol) => { // utf-8 encoding
	let t = text
	const replaceChar = noHyphenLangs.includes(symbol) ? '' : '-'
	t = t.replace(/-/g, ' ')
	t = t.replace(/\s/g, replaceChar)
	t = t.replace(/['`’]/g, '') // remove quotes
	t = t.replace(/[,，()]/g, '') // remove junk
	t = t.normalize('NFD').replace(/\p{Diacritic}/gu, '') // simplify letters for url https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript

	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)

	// 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

	// 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'

	// 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 />