Optimize your eCommerce App with JAMstackย 

MAYA SHAVIN

Our agenda

  • ๐Ÿค”ย  Get to know JAMstack and the tools
  • ๐Ÿ› ๏ธ ย Setting up
  • โœŠ ย Basic structure & components
  • ๐Ÿ“ฆ ย  Vuex โค๏ธ Firebase Realtime DB
  • ๐Ÿš€ Optimize page loading with middleware
  • ๐Ÿ Deploy with Netlify & Optimize performance

Optimize your eCommerce App with JAMstack

About me ๐Ÿ‘ฉโ€๐Ÿ’ป

๐Ÿ‘ฉโ€๐Ÿ’ป Senior Frontend Developer @Cloudinary

Optimize your eCommerce App with JAMstack

๐Ÿ‘ฉโ€๐Ÿ”ฌ Writer @FrontEndWeekly

๐Ÿ‘ฉโ€๐Ÿ’ผ Portfolio: https://www.mayashavin.com

@MayaShavin

๐Ÿ‘ฉโ€๐Ÿ’ป Founder of @VueJSIsrael

๐Ÿค” JAMstack & the Tools

Optimize your eCommerce App with JAMstack

Optimize your eCommerce App with JAMstack

stack

JavaScript

API

Markdown

Dynamic JS
Framework

Library

Server side codes

HTTPS

ย Static HTMLs

Static side generator

stack

Optimize your eCommerce App with JAMstack

โฉ Better Performance

๐Ÿ” Higher Security

๐Ÿš€ Cheaper, Easier Scaling

๐Ÿ˜ƒ Better Developer Experience

๐Ÿ› ๏ธ Technologies

Optimize your eCommerce App with JAMstack

๐Ÿ› ๏ธ How does it work

Optimize your eCommerce App with JAMstack

๐Ÿ› ๏ธ Setting up

Optimize your eCommerce App with JAMstack

๐Ÿ› ๏ธ Setting it up

Optimize your eCommerce App with JAMstack

npx create-nuxt-app nuxtloft-store
yarn create-nuxt-app nuxtloft-store

Optimize your eCommerce App with JAMstack

npm install firebase --save-dev
npm install -g firebase-tools
npm install firebase-functions@latest --save
firebase login
firebase init functions

๐Ÿ› ๏ธ Firebase

npm install firebase-admin@latest --save

ย Firebase Client SDK

Optimize your eCommerce App with JAMstack

/plugins/firebase.js
import firebase from 'firebase/app';
import "firebase/database";

if (!firebase.apps.length) {
  const config = {
    apiKey: "api-key",
    authDomain: "project-id.firebaseapp.com",
    databaseURL: "https://project-id.firebaseio.com",
    projectId: "project-id",
    storageBucket: "project-id.appspot.com",
    messagingSenderId: "sender-id",
  };

  firebase.initializeApp(config);
}

const database = firebase.database();
export default database;

Cloudinary SDK

Optimize your eCommerce App with JAMstack

/plugins/cloudinary.js
import * as cloudinary from 'cloudinary-core';

const cl = cloudinary.Cloudinary.new();
cl.config('cloud_name', 'Your cloud name');

export default cl;
npm install cloudinary-core --save-dev

Optimize your eCommerce App with JAMstack

nuxt.config.js

/*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/vuetify',
    '@/plugins/cloudinary',
    '@/plugins/firebase'
  ],

๐Ÿ“ Components & Structure

Optimize your eCommerce App with JAMstack

๐Ÿ“ Structure

Optimize your eCommerce App with JAMstack

Components

Optimize your eCommerce App with JAMstack

Product.vue

<img
  :src="src"
  @error="showPlaceholder" 
  v-show="!displayImgPlaceholder" 
  :alt="product.name"
/>
<h3>{{ product.name }}</h3>
<div class="body teal--text text--darken-4">
    {{ product.price }}
</div>
<div :class="$style.actions">
  <v-btn small color="primary">Add to cart</v-btn>
  <v-btn small color="grey">More info</v-btn>
</div>

Components

Optimize your eCommerce App with JAMstack

ItemCart.vue

<img
  :src="src"
  @error="showPlaceholder" 
  v-show="!displayImgPlaceholder" 
  :alt="product.name"
/>
<h3>{{ product.name }}</h3>
<div class="body teal--text text--darken-4">
    {{ product.price }}
</div>
<v-btn small color="error" :class="$style.action">
    Remove
    <v-icon right small>remove_shopping_cart</v-icon>
</v-btn>

List Component

Optimize your eCommerce App with JAMstack

<div
    v-for="(value, key) in filterItems"
    :key="key" 
    :class="itemClass"
>
  <slot v-bind="{ ...value, key: key }"/>
</div>
<list :items="products" grid >
  <product 
    slot-scope="item"
    :product="item"/>
</list>
List.vue
products/index.vue

Routes

Optimize your eCommerce App with JAMstack

pages/index.vue
pages/products/index.vue
pages/products/_id.vue
pages/cart/index.vue

Homepage

/products

/products/1

/cart

๐Ÿ‘จโ€๐Ÿ’ป Coding time ๐Ÿ‘ฉโ€๐Ÿ’ป

Optimize your eCommerce App with JAMstack

Vuex โค๏ธ Firebase

Optimize your eCommerce App with JAMstack

Vuex

Optimize your eCommerce App with JAMstack

  • โ„น๏ธ State management - source of truth
  • โ†”๏ธ Mutations - modify state values
  • โš™๏ธ Actions - state reactions based on users.ย 
vuex-firebase

๐Ÿš€ Middleware

Optimize your eCommerce App with JAMstack

Middleware

Optimize your eCommerce App with JAMstack

Middleware lets you define custom functions that can be run before rendering either a page or a group of pages.

ย 

vuex-firebase-middleware
vuex-firebase-middleware-cloudinary
vuex-firebase-middleware-cloudinary-optimize

๐Ÿ Deploy

Optimize your eCommerce App with JAMstack

Netlify Setup

Optimize your eCommerce App with JAMstack

Netlify Setup

Optimize your eCommerce App with JAMstack

Settings > Build & deploy > Continuous deployment > Build hooks

curl -X POST -d '{}' https://api.netlify.com/build_hooks/XXXXXXXXXXXXXXX
"scripts": {
    "deploy": "curl -X POST -d {} ...",
}
package.json

Optimize your eCommerce App with JAMstack

npm install netlify-cli -g
yarn generate

netlify deploy

Deployment - Draft

netlify login
netlify init

Development - Live test

netlify dev --live

Optimize your eCommerce App with JAMstack

Live! ๐Ÿคฉ

Made with Slides.com