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