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

GraphQL

  • Running GraphQL with Express sever
  • GraphQL schemas, queries and resolvers
  • Object types
  • Mutations and input types
  • Adding Middleware to log requested IPs
  • Setting up faster development environment using Nodemon and Babel.
  • Using GraphQLSchema to construct schema programmatically.
  • Breaking the schema into separate group of files.

 

GIT repo: https://github.com/ToniNichev/graphql-boilerplate

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