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,218