Architect 4.1: serverless, meet frontend workflows

avatar
Ryan Block
October 29, 2018

Tower Photo by Val Vesa

Last week we released Architect 4 (Yeti), focused on simplicity and speed. Today we’re incredibly stoked to share Architect 4.1, our most frontend friendly release ever.

4.0 introduced the new public directory that automatically syncs your static assets to the cloud, making it an ideal companion to your existing frontend build steps.

4.1 unlocks the ability to share frontend code across cloud functions with the introduction of @views, enabling new patterns for dynamic asset delivery and server-side rendering.

Together, we think Architect’s public directory and @views system is going to change the game for web developers onboarding into the serverless world.

Jump straight into examples and tutorials of the Architect Views pattern!

or → Create a serverless app with Architect in 30s

How @views works

In Architect 4.1, your project will now have access to the src/views folder. (If you already have a views folder in your repo, don’t worry, Architect won’t mess with it.)

Now, by default, src/views (if you create it) will be copied to all your @http GET functions whenever working locally or deploying your app.

If you’d like to surgically target your views, just add an @views section to your .arc manifest, and list the specific @http functions you’d like src/views to copy into.

For example, if you want your views to be available in just get /webapp, but not get /, simply add the following to your .arc manifest:

@http
get /
get /webapp
@views
get /webapp

Head here for more information and some really sweet examples on how to use @views in Architect 4.1!

Also new in Architect 4.1

Try out Architect in 30 seconds

Ready to give serverless a swing? No AWS account required, Architect runs locally and offline!

  1. Create a vanilla Node project:
mkdir testapp
cd testapp
npm init --yes
  1. Install Architect:
npm i @architect/architect
  1. Create a basic .arc file:
@app
testapp
@http
get /
  1. Generate your project locally:
npx create --local
mkdir src/shared
mkdir src/views
  1. Fire up the Architect sandbox to preview your work:
npx sandbox

Yeti with a coffee