Toni-Develops

My personal developing blog

Skip to content
  • Home
  • About Me
  • Blog
  • Contact
  • CHEAT SHEET
  • Tutorials
    • Data Structures
    • Algorithms
    • Webpack, Babel, React, Redux, Apollo.
    • GraphQL
    • SWIFT
    • PHP
  • Projects
    • Chrome’s Dev Helper
    • Selenium and PHP – Write a snapshot comparing tool
    • Tag Parser
    • Philips Hue Controller
    • Open Chart JavaScript Library
  • Tools
    • Median of Two Sorted Arrays calculator
    • Fibonacci sequence generator.
    • Regular Expression Tester

Projects

Using Dev Helper Chrome extension for local development

Open Chart JavaScript Library

Control your Philips Hue lights using Google Chrome built in voice recognition

Search

Webpack, Babel, React, Redux, Apollo. From scratch to the production stack in 50 min.

GIT repositlry: WebpackReactReduxApolloTutorial

  • Getting started
    • How to use this tutorial ?
    • Setting up the project
      • Creating project’s files
      • Running Webpack and creating Java Script bundle.
      • Testing the project
  • Webpack – Zero config
    • Development vs Production modes.
    • Setting Webpack with Zero config
    • Setting Webpack override
  • Adding config file and Babel loader
    • Why adding Babel ?
    • Adding Babel loader and Webpack config file.
    • Adding Webpack config file.
    • Adding Babel-polyfill.
  • Adding Webpack Dev Server
    • Ading Webpack-dev-server
    • Set up Webpack to monitor your project’s folder for changes and rebuild the bundle.
    • Adding Hot Module Replacement plug-in.
  • Adding React Library, SASS, Images and font loaders
    • Adding React library
      • Create simple react app
      • Attach React app to the main html
      • Create React component.
    • Webpack loaders.
      • Using SCSS and adding SASS loader.
      • Adding image loader.
      • Adding fonts loader.
    • Modifying component to use latest ES syntax.
  • Different ways to set up the project
    • Three ways of setting up Webpack
      • Command line Interface (CLI)
      • Webpack Dev Server API
      • Webpack Dev Middleware
    • Running server scripts using latest ES syntax
    • Adding base Webpack config.
    • Adding source map for easy debugging
  • Adding routing
    • Set up Express server to route all requests to the default ./index.html
    • Setting up React router
    • Adding Navigation
  • Adding Apollo provider and introduction to making queries to GraphQL
    • Running GraphQL server to connect to.
    • Creating ‘Smart’ component.
      • Installing dependencies.
      • Creating Apollo provider.
      • Creating connected component.
    • Refactoring the component.
      • Move the GraphQL query to a separate file.
      • Adding high order component with dogs breed buttons grid.
      • Beautify the component with SASS.
  • Adding dynamic page layout loaded from GraphQL
    • Remove header component from all other components.
    • Creating PageLayout component to load our modules.
    • Hook PageLayot component to render required HTML components
  • Bundle splitting using react-loadable
    • Install react-loadable
    • Implementing react-loadabe
      • Create ‘Loading’ helper component
      • Adding react-loadable.
    • Fixing source mapping.
  • Build Redux like custom store
    • Local component state.
    • Creating persistent store.
      • Use plain global object as a store.
      • Doing it the Redux way.
    • Create Provider and connect to pass properties using React Context.
      • Creating provider component.
      • Creating connect factory component.
      • Using the provider component.
      • Use Connect wrapper component.
    • Add another store connected component and share the store.
  • Adding Redux
  • Adding environment variables file
    • Creating the .env file
    • Adding and configuring Dotenv to load variables into process.env.
    • Adding the DefinePlugin.
    • Accessing env variables in the front-end.
  • Setting up production server
    • Creating production config.
    • Creating production build.
    • Creating Express production server.
    • Extracting CSS in a separate file.
      • Adding mini-css-extract-plugin.
      • Minimizing the CSS.
  • Server Side Rendering
    • The motivation: why doing it?
    • SSR Checklist
    • Adding server side rendering (SSR)
      • Adding ssr build script
      • Creating SSR config
      • Adding Express server
      • Adding ./components/App/ssr-index.js
    • DOM Hydration
    • Apollo store rehydration
    • Ready for a test flight
  • Adding html.js component
  • Adding multiple brands and applications
    • Passing the sub-domain to the PageLayout component
    • Passing brand name to the components
    • Adding brand specific styling to the component
  • Creating loader component and set up one CSS per brand.
    • Create a wrapper component per each brand.
      • The Home component.
      • The Greetings component.
    • Make brand component names unique.
    • Adding a hash in CSS class names
  • Adding Jest and Enzyme and creating snapshot tests
    • Setting up Jest and Enzyme.
      • Installing packages.
      • Adding moduleNameMapper.
    • Adding Jest config in package.json.
    • Writing our first tests.
      • Testing simple component.
      • Testing Redux connected component.

GIT repository: WebpackReactReduxApolloTutorial

Tags

  • algo
  • algorithms
  • babel
  • binary trees
  • bitwise
  • caching
  • certificates
  • cheat sheet
  • curl
  • data structures
  • db
  • debug
  • DOM
  • enzyme
  • express
  • filter
  • github
  • golang
  • gra
  • graphql
  • graphs
  • hash table
  • heaps
  • ios
  • java script
  • jenkins
  • jest
  • jwt
  • linked list
  • longest substring
  • map
  • memoization
  • nginx
  • oauth
  • os x
  • php
  • react
  • reduce
  • sliding window
  • sonarqube
  • ssh
  • tests
  • two sum
  • web components
  • webpack

other projects

FarJs.net
TrackThisRun.com
regexor.com
Kodi Remote
Syncolarity-lite

LATEST TUTORIALS

Webpack, Babel, React, Redux, Apollo. From scratch to the production stack in 50 min.

Selenium and PHP – Write a snapshot comparing tool

About Me

Love science, sport, good beer, good food, and outdoor activities.
And of course my lovely daughter Emma!

RSS Toni-Develops

  • Find the Index of the First Occurrence in a String September 17, 2024
  • 3 Sum-closest September 4, 2024
  • 3Sum August 26, 2024
  • GraphQL server with Gqlgen and PostgreSQL February 20, 2024
  • Using GORM library to access postgreSQL with JSONB field with GoLang February 15, 2024
  • Authenticate user with JWT in GoLang January 29, 2024
  • Sign, Verify and decode JWT January 24, 2024
  • In-app purchase with server to server notifications January 9, 2024
  • Adding Google sign-in in iOS with SwiftUI January 4, 2024
  • Using EnvironmentObject to share data between views January 3, 2024

Site contents

  • A homepage section
    • Projects
      • Control your Philips Hue lights using Google Chrome built in voice recognition
      • Open Chart JavaScript Library
      • Syncolarity: a file syncing app
      • Tag Parser
      • Using Dev Helper Chrome extension for local development
  • About Me
  • Algorithms
  • Blog
  • CHEAT SHEET
  • Contact
  • falling-colors-and-shapes-privacy-policy
  • Fallingcolors and shapes game
  • Fibonacci sequence generator.
  • Home
  • Median of Two Sorted Arrays calculator
  • PHP
  • SWIFT
  • TUTORIALS
    • Data Structures
    • GraphQL
  • VSCode openAI chat extension
  • Webpack, Babel, React, Redux, Apollo. From scratch to the production stack in 50 min.
Proudly powered by WordPress
  • Home
  • About Me
  • Blog
  • Contact
  • CHEAT SHEET
  • Tutorials
    ▼
    • Data Structures
    • Algorithms
    • Webpack, Babel, React, Redux, Apollo.
    • GraphQL
    • SWIFT
    • PHP
  • Projects
    ▼
    • Chrome’s Dev Helper
    • Selenium and PHP – Write a snapshot comparing tool
    • Tag Parser
    • Philips Hue Controller
    • Open Chart JavaScript Library
  • Tools
    ▼
    • Median of Two Sorted Arrays calculator
    • Fibonacci sequence generator.
    • Regular Expression Tester