DOBROMIR HRISTOV

@d_m_hristov

BOSS

Deploy SPAs like a

with

Who am I ?

Dobromir Hristov

  • Lead FE Developer @Hypefactors
  • Over 3 years of Vue experience
  • Article Author
  • Open Source Author
  • Vue Ecosystem Contributor
  • Vue Community Leader & Moderator

Hosting and deployment summary

 

I

I

Hosting and deployment summary

Types of Websites

Traditional Server Rendered

SPA + Static Websites

Isomorphic
(SSR + SPA)

I

Hosting and deployment summary

What gets hosted where

Traditional Server Rendered

SPA + Static Websites

Isomorphic
(SSR + SPA)

Cheap Shared Server

Static file hosting

VPS or other similar

?

I

Problems with Deploying SPAs

Pages ​with more text or explanation

  • Cache invalidation
  • Downtime
  • Slower with more assets
  • Keeping things in sync

Building the app locally

404 deep links

I

How do we deploy those Apps?

  • No build step, just FTP

Pages ​with more text or explanation

  • Build it locally, FTP it
  • Use PHPStorm Sync + FTP
  • Use CI to build an image*
  • Over engineer a git pulling solution

JAMstack explained

II

What is a JAMstack?

II

JAMstack explained

What is a JAMstack?

II

JAMstack explained

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"

— Mathias Biilmann (CEO & Co-founder of Netlify).

JAM?

II

JAMstack explained

JavaScript

Dynamic functionality is handled by JavaScript, running on the clients browser. This could be any frontend framework or library.

APIs

Server-side operations are extracted away into APIs, that are accessed over HTTPS with JavaScript. These can be custom-built or third-party services.

Markup

Websites are served as plain static HTML files. These can be generated from source files, such as .vue, Markdown or similar, using a Static Site Generator.

https://jamstack.org/

Why pick JAMstack?

II

JAMstack explained

  • Faster performance - CDN

  • More secure - less holes

  • Everything Lives in Git

  • Less expensive, Free

  • Scalable

  • Better developer experience

Is JAMstack for my app?

II

JAMstack explained

Built with CMS like Wordpress, Drupal, Joomla or similar?

Isomorphic SPA gets rendered on the server at runtime?

Is Node, Ruby, PHP or other server language required to render pages?

Netlify

III

What is a Netlify?

III

Netlify

Platform for static website hosting and deployment

that is meant to be easy, performant

and scalable on a global level

So what is so cool about it?

III

Netlify

Deploy in seconds

Connect the repo

Add build settings

Deploy on every push

That is just the beginning

III

Netlify

Deploy instances + 1 click rollback

III

Netlify

Build commands and CI baked in

III

Netlify

Automatic Deploy Previews

III

Netlify

Other goodies

III

Netlify

  • FREE SSL
  • Instant cache invalidation
  • Global CDN Network
  • FREE Pre-rendering
  • Asset optimization
  • Redirects, Rewrites, Proxies
  • Header Control
  • Domain and DNS management
  • Deploy Context
  • Lambda Functions
  • Password Protection*
  • Netlify CMS
  • Forms*
  • Analytics*

Redirects

III

Netlify

# Netlify settings for single-page application
/*    /index.html   200

NO COMPLEX SERVER CONFIGS
NO MORE 404 ERRORS

# Proxy all /api/ calls
/api/*  https://api.example.com/:splat  200

# Redirect users in israel to /israel
/  /israel  302  Country=il

Pre-rendering

III

Netlify

What can we do with Netlify?

III

Netlify

Deploy a website with Vue CLI 3 & 2

Did you know Nuxt has a Static mode?

III

Netlify

Deploy a Nuxt statically generated app

Whose uses Nuxt Static mode?

III

Netlify

Deploy a Vuepress website

III

Netlify

Who uses Vuepress?

III

Netlify

Deploy tactics for Netlify

III

Netlify

  • Directly build and publish every build

  • Run test on CI and publish build on success

  • Wait for API on CI, then publish current commit hash on Netlify

How much does it cost?

III

Netlify

ITS FREE

most of it...

DEMO TIIIIIIME

III

Netlify

Find me at

dobromir-hristov

d_m_hristov

dobromir_hristov

dobromir-hristov

Dobromir Hristov

Deploy SPAs like a boss with Netlify

By Dobromir Hristov

Deploy SPAs like a boss with Netlify

What is Netlify, JAMstack and how they fit into the Vue ecosystem

  • 108

More from Dobromir Hristov