ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • 🚀Quick-start Guide
  • 🗺️Roadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page
  • What’s Wrong With jQuery?
  • History API
  • React and JSX
  • Setting Up The Environment
  • VSCode Extensions
  • Node
  • Yarn
  • Installing The ScandiPWA App

Was this helpful?

  1. Tutorials
  2. Video Tutorials

#1 Setting up and talking theory

PreviousVideo TutorialsNext#2 Templating in React

Last updated 4 years ago

Was this helpful?

ScandiPWA v3 has arrived at your doorstep and with it comes a new tech stack. Let’s talk about it!

Topics covered in this tutorial:

  • ​​

  • ​​

  • ​​

  • ​​

    • ​​

    • ​​

    • ​​

  • ​​

What’s Wrong With jQuery?

Each page of an application has a header, a footer and some content. We need to customize all of this periodically. The jQuery library theoretically allows us to have easy access to any specific element, but it would be very messy to implement as a jQuery template due to the fact that it consists of pure strings that are hard to edit.

History API

Previously each page you visited made a request to a server, which then provided a renderable output. Now, we can skip the server step and start to render the page on the client’s side by re-using the URL that’s currently being visited, if it had been visited at some point in history.

The history API lets us track the changes made in the state of the application and control the routing.

React and JSX

For example, here we define a constant that gets assigned a JSX tag:

const element = <h1>Hello, world!</h1>;
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;​ReactDOM.render(  element,  document.getElementById('root'));

There are two types of components:

  • functional components - processes properties and returns a template

  • class components - let’s you work with OOP concepts

    • very useful when you’re working with a theme that should be extended (like ScandiPWA)

Setting Up The Environment

The ScandiPWA team recommends using VSCode as a development environment due to its ease of use and extension availability.

VSCode Extensions

Recommended VSCode extensions:

You can manually install a VSCode extension by going to the extensions view or hitting Ctrl + Shift + X on the keyboard. Then click on Views And More Actions... and Install From VSIX.

Alternatively, you can also use the command line:

code --install-extension path/to/myextension.vsix

Node

node -v

For the development of ScandiPWA you need Node version 10 and higher.

Yarn

Optional in order to get faster install times than using npm. If you don’t want to use Yarn, npm will suffice.

Installing The ScandiPWA App

After you have Node and Yarn installed you can type the following in your command line:

npx create-scandipwa-app <your-app-name>

After you’ve successfully created the ScandiPWA theme, go to your theme’s folder and run the following command that will compile the project:

yarn start

Let’s look at the file structure:

📂<your-app-name> ┣ 📂i18n           # internationalization folder ┣ 📂magento ┣ 📂node_modules   # contains the app's dependencies ┣ 📂public         # assets should be put here ┣ 📂src            # empty source folder ┣ 📜composer.json ┣ 📜package.json ┗ 📜yarn.lock

The src or source folder will be empty in a fresh install. Since ScandiPWA is meant to be extended, not modified, a fresh install will run the default ScandiPWA theme until new files that will override the theme are added to the src folder.

You can check out the what the default theme consists of in node_modules/@scandipwa/scandipwa/src - the original source folder.

The public folder should contain any assets you want to have like fonts, icons etc.

i18n or internationalization folder contains files for locale handling and translations of any phrases you have on the app.

The package.json file contains two dependencies:

"dependencies": {    "@scandipwa/scandipwa": "0.0.1",    "@scandipwa/scandipwa-scripts": "0.0.5"}

scandipwa dependency currently is in v2.17.0. scandipwa-scripts dependency contains the webpack configuration.

There are two scripts available out of the box as well:

"scripts": {    "start": "scandipwa-scripts start",    "build": "scandipwa-scripts build"}

The start command begins the local file watching process and starts the local dev server that will let you see the changes in the browser right as you’ve made them.

Note that yarn start was the first command that we ran, thus the development process can begin. You can check out your theme by going to localhost:3000 in your browser.

The build command is for starting the production build process. You can build in Magento mode as a Magento theme and you can also build as a store front.

If you want to build ScandiPWA as a Magento theme, you’ll notice that the composer.json file contains the theme registration and the magento folder contains all of the assets needed for defining a theme.

ScandiPWA v2 used - an API for working with document object models or DOMs. Allegedly, jQuery lets you do more while writing less. So, why use something else?

With the coming-of-age of ScandiPWA has switched to React.

Moreover, in itself allows us to write simple, editable templates and components. These so-called components are encapsulated code chunks that later will be shipped or not shipped based on necessity.

​ is a syntax extension to JavaScript which means that we can use the JS variables, expressions etc. inside of it to write a template.

The following example can be found and it shows us how we can declare a variable, use it in a template and immediately render it:

Let’s briefly look at the .

​ - JavaScript code quality assurance tool. ESlint analyzes your code and warns you of any errors that could compromise its stability.

ScandiPWA Development Toolkit - lets you customize your theme with more ease, you can download the .vsix file .

Check if is installed on your computer by typing the following command in the terminal:Copy

jQuery
history API
React
JSX
here
components
ESLint
here
Node.js
What’s Wrong With jQuery?
History API
React and JSX
Setting Up The Environment
VSCode Extensions
Node
Yarn
Installing The ScandiPWA App
Let's talk theory