Skip to content

Instantly share code, notes, and snippets.

Avatar
:shipit:

Jake Ginnivan JakeGinnivan

:shipit:
View GitHub Profile
@JakeGinnivan
JakeGinnivan / Pulumi.yaml
Last active Feb 6, 2021
Pulumi /w TypeScript project references + dynamodb lock
View Pulumi.yaml
name: serverless-mono
description: Serverless mono infrastructure
backend:
url: s3://my-pulumi-state-bucket
runtime:
name: nodejs
options:
typescript: false
lock:
region: ap-southeast-2
View react-ssr-component-data-load.jsx
class SomethingComponent extends React.Component {
componentWillMount() {
// If we don't have an article, load it
if (!this.props.article) {
this.props.dispatch(loadArticle(this.props.id))
}
}
render() {
if (this.props.loading) {
View react-ssr-transfer-state.js
`<script>window.data = ${serialize(store.getState())}</script>`
View react-ssr-resolve-all.js
// Note, doesn't deal with timeouts, infinite recursion, errors etc..
async function resolveAll(render, promiseTracker) {
const renderResult = render(promiseTracker)
if (promiseTracker.hasWork) {
await promiseTracker.waitForCompletion()
return resolveAll(render, promiseTracker)
}
return renderResult
}
View react-ssr-redux-action.js
{
type: 'MY_ACTION',
payload: {/* Data goes here */}
}
View react-ssr-assets.json
{
"main": {
"js": "/static/js/main_043b2e805d67f533bad6.js",
"css": "/static/css/main.1e87b891.css"
},
"vendor": {
"js": "/static/js/vendor_d4b74274cd66cdfe271f.js"
}
}
View react-ssr-data-load-function.js
function loadArticle(id) {
return async function(dispatch) {
// Dispatch an action indicating we have started loading
// When reduced, the state would likely indicate we
// are in a loading state
dispatch(startLoadArticle(id))
// Perform the load of the data
const loadedArticle = await api.loadArticle(id)
View react-ssr-redux-action-creator.js
function articleLoaded(id, article) {
return {
type: 'ARTICLE_LOADED',
payload: { id, article }
}
}
View react-ssr-render-html.js
import assets from '../assets.json'
function renderHtml(renderedMarkup: string) {
return `<!DOCTYPE html>
<html>
<head>
<link id="css-main" type="text/css" rel="stylesheet" href="${assets.main
.css}">
</head>
<body>
View react-ssr-thunk.js
function dispatch(action) {
// Promise tracker middleware
const nextAction = reduxThunkMiddleware(action)
// Because react-thunk returns the result of the
// thunk, our async function returns a promise
// Which means this statement will be true
if (Promise.resolve(nextAction) === nextAction) {
// Tracking a promise is a side effect of our middleware
track(nextAction)