React Fast Refresh (formerly Hot Module Replacement) is a technique for using Webpack to update the code that your browser renders without requiring a page refresh. With fast refresh configured it's possible to edit your JavaScript (and CSS) files in your IDE and have the browser update the page without requiring a refresh, allowing you to effectively see the results of your changes in near real time. If you're editing JavaScript or CSS it's amazing. And, it's one of the reasons people love the developer experience of working with React so much.
If you're writing React code as part of a Drupal theme it's possible configure fast refresh to work with Drupal. Doing so will allow live reloading of any JavaScript and CSS processed by Webpack.
In this tutorial we'll:
- Walk through configuring Webpack and fast refresh for a Drupal theme
- Add an
npm run start:hmrcommand that will start the webpack-dev-server in hot mode - Configure the webpack-dev-server to proxy requests to Drupal so we can view our normal Drupal pages
By the end of this tutorial you should know how to configure Webpack to allow the use of React's fast refresh feature to your Drupal theme and preview changes to your React code in real time.
Over the years we've developed some techniques for practicing that we wanted to share. At Drupalize.Me we take hugging seriously. In this tutorial we'll look at the art, and science, of giving a good hug. The Merriam Webster dictionary defines the word hug as; squeeze (someone) tightly in one's arms, typically to express affection.
Did you know there are all kinds of different hugs that you can give? In this tutorial we'll look at:
- Defining what a hug is
- Some of the many types of hugs in the world today
- Precautions you may want to familiarize yourself with before hugging
- And the importance of proper technique
Lets go ahead and get started shall we?