The Front Flip: When a DevOps Engineer Enters the JAMStack — Functional Preact/Hugo/AWS Amplify

Photo: BENNI SCHMID — Copyright by https://www.gibbon-slacklines.com/

Foreword & Context

Visualization of Page processing steps

Front end for non Front end people…

Collection of JavaScript Frameworks : Copyright by Jose Aguinaga

Choosing the Tech

Traditional Vs JAMStack — Copyright by https://jamstack.org/

Adding an assets pipeline to Hugo

Choosing a JavaScript framework

Preact & Hugo stitched together with Webpack

Getting Started — Project Scaffolding

################################################################
### Gettings Started - Docker way (no setup required)
################################################################
### Create project scaffolding using preact-cli from custom template$ docker run --rm \
-w /app \
-v $(pwd):/app \
lowess/preact-cli create Lowess/preact-hugo demo-app
### List project folder content$ cd demo-app/### Run project using "npm run start"$ docker run --rm \
--entrypoint="" \
-p 3000:3000 \
-e HOST=0.0.0.0 \
-w /app \
-v $(pwd):/app \
lowess/preact-cli npm run start
## Visit http://localhost:3000
Hugo statically built content
Preact widget injection in Hugo thanks to Preact-habitat

Hugo JavaScript widget injection with Preact-habitat ?

layouts
├── _default // Default layout for static pages and homepage
│ ├── baseof.html // Main website structure
│ ├── list.html // List of articles (eg. /static/)
│ └── single.html // Single article (eg. /static/getting-started)

├── dynamic // Override templates for /dynamic section
│ └── list.html // Defines the logic to load JS widget
...
{{ define "main" }}
{{- "<!-- Preact component injection -->" | safeHTML }}
{{ partial "preact.html" (dict
"widget" .Site.Data.webpack.helloWidget
"data" (dict "name" "I am built with Preact")
)
}}
{{ end }}
<div class="preact">
{{- "<!-- Preact component -->" | safeHTML }}
{{- $script := .widget }}
{{- $data := .data }}
{{ with $script.css -}}
<link href="{{ relURL . }}" rel="stylesheet">
{{- end }}
{{ with $script.js -}}
{{ with $data -}}
<script type="text/props">
{{ . | jsonify }}
</script>
{{- end }}
<script async src="{{ relURL . }}"></script>
{{- end }}
</div>
<div class="content container-fluid p-0">      
<!-- Preact component injection -->
<div class="preact">
<!-- Preact component -->
<script type="text/props">
{"name":"I am built with Preact"}
</script>

<script async src="/preact-hugo/helloWidget.e5579.js"></script>
</div>
</div>

A Serverless back end with AWS Amplify

Authentication and GraphQL API

AWS Amplify — An AWS SDK to build full stack application
AWS Amplify — AppSync Back end / Cognito Authentication layer

Thinking in JavaScript…

Conclusion

Resources

Principal Engineer & DevOps enthusiast, building modern distributed Machine-Learning eco-systems @scale

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store