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