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! ๐คฉ
Optimize your eCommerce App with JAMstack
By Maya Shavin
Optimize your eCommerce App with JAMstack
- 1,231