DEV Community: Tegan Rauh

Using Action Cable with React Native

Tegan Rauh — Mon, 17 Aug 2020 01:49:11 +0000

One of the changes with Rails 6 was to make Action Cable work with webworkers.. Consequently, this also makes it possible to now use the Action Cable client javascript with React Native because it now depends on the DOM less.

That said, at the time of writing, there isn't a solid guarantee that it will continue to work.
https://github.com/rails/rails/pull/36652#issuecomment-510623557

That also said, if it does stop working, it'll most likely be caught during compilation or a very apparent error when testing the update.

So dust off your generic demo application hats, because I'm going to be showing how you can build a chat app using rails and React Native (and hopefully extend that knowledge to real apps). I'm going to assume a knowledge of javascript and Rails (or that you'll look up anything you don't know).

Rails Project Generation

Skip to the React Native App Generation section if you've already got a Rails project and just need to see how to hook Action Cable up to it.

To make sure we're all on the same page I'm going to quickly go through setting up a Rails app. It's just going to be a very minimal application, and it should be easy enough to work this into an existing app.

I'm using rails 6.0.3.2, and ruby 2.6.3, but the versions shouldn't matter too much.

I've generated the application with

rails new ChatApp --skip-sprockets

Browser Version

To make sure things are getting set up correctly, I'm going to make a really simple browser version of the chat app. This isn't really necessary, it's just for demonstration (and if you're closely following along might be useful to find out why something isn't working).

I've created a simple controller and layout like so

# app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index; end
end

# config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

<!-- app/views/home/index.html.erb -->

<h1>Chat App</h1>

<form id="message-form">
  <input type="text" name="message" id="message">
  <input type="submit" value="Send">
</form>

<hr>

<div id="messages">
</div>

// Added to app/javascript/packs/application.js

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('#message-form');

  const formSubmitted = (e) => {
    e.preventDefault();
    const { value } = e.target.querySelector('#message');
    console.log('i will send', value);
    e.target.reset();
  };

  form.addEventListener('submit', formSubmitted);
});

This is all pretty straight forward. At this point when you visit the home page, you'll see a very bare page with a form. If you submit the form, the console will log i will send X.

Adding Action Cable

Action Cable is included by default when running rails new. If you don't have anything in app/channels, then you'll need to set it up first. The Rails Guide should be enough to go off of.

Now we're going to create a channel by running this command.

rails g channel Chat

This will create app/channels/chat_channel.rb and app/javascript/channels/chat_channel.js.

After making some modifications, here are the final files I ended up with.

# app/channels/chat_channel.rb

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from('main_room')
    content = {
      key: SecureRandom.hex(5),
      message: 'someone has arrived'
    }
    ActionCable.server.broadcast('main_room', content: content)
  end

  def receive(data)
    content = data.merge(key: SecureRandom.hex(5))
    ActionCable.server.broadcast('main_room', content: content)
  end
end

Let's quickly break this down a bit.

In ChatChannel#subscribed, we're going to create a generic message when someone connects, then send it off to everyone in the main_room room. For key I'm just using a random unique value. This is purely just for React to have a key attribute; if you're saving data and have an ID or have another unique attribute then this isn't necessary.

ChatChannel#recieve will take in the data from the client websocket, then add a key to act as an ID and spit it back out to the clients (including the one that initially sent it).

// app/javascript/channels/chat_channel.js

import consumer from './consumer';

const ChatChannel = consumer.subscriptions.create({ channel: 'ChatChannel', room: 'main_room' }, {
  received(data) {
    const messagesContainer = document.querySelector('#messages');
    const message = document.createElement('div');

    message.innerHTML = `
      <p>${data.content.message}</p>
    `;

    messagesContainer.prepend(message);
  },
});

export default ChatChannel;

In this file we're just connecting to the channel, and setting up a method that will run when new data is broadcasted. All this function does is add new message to the messages container.

Now we just need to send data instead of log it by using ChatChannel.send. Here is the final application.js I ended up with.

// app/javascript/packs/application.js

require('@rails/ujs').start();
require('turbolinks').start();
require('@rails/activestorage').start();
require('channels');

import ChatChannel from '../channels/chat_channel'; // new

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('#message-form');

  // modified
  const formSubmitted = (e) => {
    e.preventDefault();
    const { value } = e.target.querySelector('#message');
    ChatChannel.send({ message: value }); // new
    e.target.reset();
  };

  form.addEventListener('submit', formSubmitted);
});

Assuming everything is working, the message will be broadcasted to all the connected clients and added to the page. If you wanted, you could test this by opening up the site in multiple tabs.

Sometimes the message 'someone has arrived' won't show on the just connected client. If it doesn't show, try reloading a few times, or using multiple tabs

React Native App Generation

I'm going to use Expo for this project.

I'm using Node version 12.18.1 and Expo 3.23.3.

Generate a new Expo project with

expo init ChatAppClient --template blank

For the this guide, I'm going to use the iOS simulator. You should be able to use whichever platform you want.

Running yarn ios should eventually pop you into the iPhone simulator with a minimal app.

Base Layout

For demonstration purposes I'm going to do everything in App.js.

Here is what I'm starting out with. It doesn't make any calls to the server yet, just generally sets everything up.

// App.js

import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  KeyboardAvoidingView,
  FlatList,
} from 'react-native';
import Constants from 'expo-constants';

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    height: '100%',
  },
  messages: {
    flex: 1,
  },
  message: {
    borderColor: 'gray',
    borderBottomWidth: 1,
    borderTopWidth: 1,
    padding: 8,
  },
  form: {
    backgroundColor: '#eee',
    paddingHorizontal: 10,
    paddingTop: 10,
    paddingBottom: 75,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    backgroundColor: 'white',
  },
});

const Message = ({ message }) => (
  <View style={styles.message}>
    <Text style={styles.message}>{message}</Text>
  </View>
);

const App = () => {
  const [value, setValue] = useState('');
  const [messages, setMessages] = useState([{ key: '1', message: 'hi' }]);

  const renderedItem = ({ item }) => (<Message message={item.message} key={item.key} />);
  const inputSubmitted = (event) => {
    const newMessage = event.nativeEvent.text;
    console.log('will send', newMessage);
    setValue('');
  };

  return (
    <KeyboardAvoidingView style={styles.container} behavior="height">
      <FlatList
        styles={styles.messages}
        data={messages}
        renderItem={renderedItem}
        keyExtractor={(item) => item.key}
      />

      <View style={styles.form}>
        <TextInput
          style={styles.input}
          onChangeText={text => setValue(text)}
          value={value}
          placeholder="Type a Message"
          onSubmitEditing={inputSubmitted}
        />
      </View>
    </KeyboardAvoidingView>
  );
};

export default App;

Hooking Up Action Cable

Most of this process is copying what would be done in the browser.

First we need to add the Action Cable package.

yarn add @rails/actioncable

Note: make sure you add @rails/actioncable instead of actioncable, otherwise you wont be using the Rails 6 version.

First let's create our consumer.

import { createConsumer } from '@rails/actioncable';

global.addEventListener = () => {};
global.removeEventListener = () => {};

const consumer = createConsumer('ws://localhost:5000/cable'); // the localhost url works on the iOS simulator, but will likely break on Android simulators and on actual devices.

We need to set global functions for addEventListener and removeEventListener because they're currently used in Action Cable to tell when the tab is in view. See this issue for more context.

If you want, you don't need to make these functions be empty. They just need to exist (and be functions) otherwise the code will blow up.

Another thing to point out is that we need to give createConsumer a URL to connect to. The protocol needs to be ws or wss otherwise, Action Cable will try to do stuff with the DOM. By default /cable is the path that Action Cable uses (you'll probably know if this isn't the case for you). When in doubt if you've got the right URL, just try it in the browser version, then you can see if it fails.

Sometimes simulators (in my experience particularly the Android simulator) doesn't treat localhost as the same localhost as your browser. There are ways around it, like using a specific IP address, or using a tool like ngrok, or just deploying your backend somewhere. If you need to, this also works with the browser version of Expo.

Next we need to join the channel and add incoming messages. That can be done by adding the following to the App component.

const chatChannel = useMemo(() => {
  return consumer.subscriptions.create({ channel: 'ChatChannel', room: 'main_room' }, {
    received(data) {
      setMessages(messages => messages.concat(data.content));
    },
  });
}, []);

useMemo will run the given callback whenever one of the values in the array change. In this case, we're not actually giving any values, so it will never change. Meaning we're connecting to the channel when the App component first gets rendered (or just use componentDidMount if you're working with a class component). The value of chatChannel is the same Subscription object like what gets exported by chat_channel.js in the browser version.

Now all that's left is to send the message in the inputSubmitted function. That can be done by modifying it to look like this.

const inputSubmitted = (event) => {
  const newMessage = event.nativeEvent.text;
  chatChannel.send({ message: newMessage }); // new
  setValue('');
};

Assuming everything is set up correctly (and an update hasn't gone out that breaks everything), you should be able to send messages between the app and browser version.

Here's the final App.js file I've ended up with:

// App.js

import React, { useState, useMemo } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  KeyboardAvoidingView,
  FlatList,
} from 'react-native';
import Constants from 'expo-constants';
import { createConsumer } from '@rails/actioncable';

global.addEventListener = () => {};
global.removeEventListener = () => {};

const consumer = createConsumer('ws://localhost:5000/cable');

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    height: '100%',
  },
  messages: {
    flex: 1,
  },
  message: {
    borderColor: 'gray',
    borderBottomWidth: 1,
    borderTopWidth: 1,
    padding: 8,
  },
  form: {
    backgroundColor: '#eee',
    paddingHorizontal: 10,
    paddingTop: 10,
    paddingBottom: 75,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    backgroundColor: 'white',
  },
});

const Message = ({ message }) => (
  <View style={styles.message}>
    <Text style={styles.message}>{message}</Text>
  </View>
);

const App = () => {
  const [value, setValue] = useState('');
  const [messages, setMessages] = useState([]);
  const chatChannel = useMemo(() => {
    return consumer.subscriptions.create({ channel: 'ChatChannel', room: 'main_room' }, {
      received(data) {
        setMessages(messages => messages.concat(data.content));
      },
    });
  }, []);

  const renderedItem = ({ item }) => (<Message message={item.message} key={item.key} />);
  const inputSubmitted = (event) => {
    const newMessage = event.nativeEvent.text;
    chatChannel.send({ message: newMessage });
    setValue('');
  };

  return (
    <KeyboardAvoidingView style={styles.container} behavior="height">
      <FlatList
        styles={styles.messages}
        data={messages}
        renderItem={renderedItem}
        keyExtractor={(item) => item.key}
      />

      <View style={styles.form}>
        <TextInput
          style={styles.input}
          onChangeText={text => setValue(text)}
          value={value}
          placeholder="Type a Message"
          onSubmitEditing={inputSubmitted}
        />
      </View>
    </KeyboardAvoidingView>
  );
};

export default App;

Building a static site with Hugo and Webpack

Tegan Rauh — Mon, 09 Mar 2020 03:46:08 +0000

In this article, I'm going to build a static site with Hugo and use webpack to bundle assets.

Hugo is a lovely tool for building static sites, and if you've ever used a static site generator before, it'll probably feel pretty familiar.

I'm going to try and keep the webpack config as simple as possible, while still being able to be useful and reliable. The point of this config is to be able to write vanilla javascript and CSS without having to think will it work in IE or Safari.

Javascript code will use Babel to be transpiled and polyfilled, and styles will use Autoprefixer (and PostCSS by extension).

At the end of the article, you can see all the final webpack related files. I also have a demo in this Github project.

Creating a Hugo Project

This section is mostly for context on what I'm working with. If you've already got a Hugo project setup, then you can probably just skip this section.

Create a new site with hugo new site demo-site then cd into it.

Next I'm going to run hugo new posts/demo-post.md so we have something to work with.

This is what I put in my new post:

---
title: "Demo Post"
date: 2020-03-04T19:18:46-06:00
draft: true
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lacus vel facilisis volutpat est velit egestas.
Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
Dui accumsan sit amet nulla facilisi morbi tempus iaculis.
Praesent semper feugiat nibh sed pulvinar proin.
Quis ipsum suspendisse ultrices gravida dictum fusce.
Enim nec dui nunc mattis.
In nulla posuere sollicitudin aliquam ultrices sagittis orci a.
Sagittis vitae et leo duis ut.
Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida.

Habitasse platea dictumst quisque sagittis.
Placerat vestibulum lectus mauris ultrices eros in.
Risus pretium quam vulputate dignissim suspendisse in est.
Vestibulum mattis ullamcorper velit sed.
Et malesuada fames ac turpis.
Egestas diam in arcu cursus euismod quis.
Pellentesque habitant morbi tristique senectus et.
Sed vulputate odio ut enim.
Nulla facilisi nullam vehicula ipsum a arcu cursus vitae.
Bibendum at varius vel pharetra.
Non arcu risus quis varius.

That's all I'm going to have for content on this demo site. Similarly, these templates are going to be super minimal (read, ugly).

First I'm going to create a file in layouts/_default/baseof.html and make it look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>{{ .Title }}</title>
</head>
<body>
  <main id="content">
    {{- block "main" .}}{{- end}}
  </main>
</body>
</html>

As the name implies, this template will be used as the default frame for other pages.

Now I'm going to create a template at layouts/_default/list.html. This template is basically a catch all for any page that lists things.

Here's what I put in this file:

{{ define "main" }}
  <h1>{{ .Title }}</h1>

  <div>
    {{ range .Pages }}
      <article>
        <header>
          <h2>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
          </h2>
        </header>

        <p>{{ .Summary }}</p>
      </article>
    {{ end }}
  </div>
{{ end }}

Lastly, I'm going to create layouts/_default/single.html. Like list.html, this is going to be a catch all template for any page that isn't an index page.

The template looks like this:

{{ define "main" }}
  <header>
    <h1>{{ .Title }}</h1>
    <h2>{{ .Date.Format "Jan 2, 2006" }}</h2>
  </header>

  <div>
    {{ .Content }}
  </div>
{{ end }}

At this point, you should be able to run hugo server -D then visit http://localhost:1313/posts, and see something like this:

If you click on the post title, you'll see something like this:

I'm not really showing off what Hugo can do, so if you're new to it, I suggest taking a look at the template lookup order guide to see how you can be more specific with your templates.

Also if you're not aware, you can create content/_index.md or content/posts/_index.md to have dynamic content on those list pages.

Be sure to also add public (the default build directory) to your .gitignore.

Adding webpack

Alright, let's get into some fun things.

Before we can bundle things, we need to make things to bundle. I'm going to create src/js/app.js and just add a hello world to it:

console.log('hello world');

Now, let's install some packages.

yarn add -D webpack webpack-cli

Don't forget to add node_modules to your .gitignore

Now create a webpack.config.js file. For bundling javascript, this is pretty much the minimum we need.

const path = require('path');

module.exports = {
  entry: [path.resolve('src', 'js', 'app.js')],
  output: {
    path: path.resolve('static', 'assets'),
    filename: 'bundle.js',
  },
};

Here are some things to note.

Using a src directory and the structure inside of src is mostly arbitrary. You don't want Hugo to do anything with the unprocessed files (which is why they're in src instead of, say, static), but otherwise you have free rein.

Speaking of things that don't matter, neither does the output file name being bundle.js. We'll need to reference it later, but otherwise it's pretty arbitrary.

What does matter is the path of your output. Out of the box, Hugo is setup to include things in static in the final build (so static/assets/bundle.js will be available as /assets/bundle.js).

If you already have a static/assets directory, you'll probably want to change the path in your webpack config to keep build artifacts separate. If you need to, you can also make Hugo aware of other directories for static files

Lastly, add static/assets (or whatever path you used) to your .gitignore (you shouldn't commit build artifacts).

Anyway.

In your package.json some scripts for building things.

{
  "scripts": {
    "start": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
  },
  // ...
}

yarn start will be ran in tandem with hugo server -D. When actually building your site, run yarn build before your hugo build command.

But there's still one last thing we need to do, and that's actually reference our javascript in our template.

Inside the head or bottom of body for baseof.html, add:

<script src="/assets/bundle.js"></script>

Now you should see hello world logged in your console.

The dev server built into Hugo should reload your browser when changes are made to static/assets (i.e. when webpack finishes building), so you probably don't need to add the webpack dev server or browsersync. That said, I'll quickly show how to add the webpack dev server at the end of this article.

At this point, if you're familiar with webpack, there's probably not much else you'll gain from this article. The rest of it is just configuring loaders.

Transpiling and Polyfilling JS

To prevent problems later on, now is a good point to setup transpiling and polyfilling of our javascript. To do this, we're going to use Babel (and core-js).

yarn add -D babel-loader @babel/core @babel/preset-env core-js

Next, in the exported object inside of webpack.config.js add:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
};

Adding this rule to our webpack config will make webpack run any file that ends with .js through Babel. However, it excludes files from our node_modules, so if a library isn't itself transpiled then you will need to change the regex for exclude to something like this /node_modules\/(?![some_package|some_other_package])/.

Before we configure babel, let's quickly define what browsers we support.
Open up your package.json and add a browserslist key.

This step is not needed if you already have a browserslist source.

For my use I'm going to add "browserslist": "> 1%". This is basically saying "only support browsers that make up more than 1% of browser usage".

Protip: if you run npx browserslist '> 1%' then you can see what browsers that will be.

Now we can actually configure babel. I'm going to add the following to .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Out of the box with @babel/preset-env, newer syntax like const and let will be turned into older equivalents (var in those cases case).

I'm also setting the version of core-js to be whatever the version was added earlier (in my case 3).

Lastly, I'm setting useBuiltIns to usage. This will make it so when some kind of javascript is used that isn't supported by one of the browsers I support, babel will include a polyfill from core-js.

So I'm able to write something like this:

const x = ['a', 'b'];
x.forEach(y => console.log(y));

And it will turn into this (excluding bundling done by webpack):

"use strict";

require("core-js/modules/es.array.for-each");

var x = ['a', 'b'];
x.forEach(function (y) {
  return console.log(y);
});

Babel will look to your browserslist settings and determine if it needs to include a polyfill. Eventually running the same code through Babel with the same settings will not change it, because eventually every browser that's used will be able to support forEach.

A quick note though, if you want to use async await in your javascript, be sure to add the @babel/plugin-transform-regenerator plugin.

Lastly, even though I used .babelrc, you could use babel.config.js or even just put this in your package.json. If you wanted, you could even change the syntax for how babel-loader is set and just put your babel config in your webpack config.

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      // babel config here
    },
  },
}

Don't forget to restart your webpack command.

Adding Some Style

Now that we've got Webpack to transpile, polyfill, and bundle our javascript, let's get it some styles on this page.

For this demo, I'm going to stick to pretty much just vanilla CSS with PostCSS. Fortunatly, you can still use PostCSS and Autoprefixer with other loaders. So if you want to also have Sass for example, you'll just also add the sass-loader.

What Autoprefixer will do, is look at our browserslist, and automatically add vendor prefixes to our built CSS. So we can give it something like this:

.example {
  position: sticky;
}

and Autoprefixer will spit out something like this:

.example {
  position: -webkit-sticky;
  position: sticky;
}

What prefixes it adds is based of the browserslist we set earlier. As time goes on and browsers get better, less things will be prefixed.

Alright, let's get started.

Like before, let's add some stuff to build, so we'll know when our setup is working. I'm going to use src/styles/app.css:

body {
  background-color: mistyrose;
}

Now we're going to install some more packages.

yarn add -D css-loader postcss-loader autoprefixer mini-css-extract-plugin

After that, let's create a postcss.config.js and make it look something like this:

module.exports = {
  plugins: [
    require('autoprefixer'),
  ],
};

Now we're going to make a few changes to webpack.config.js.

First, in the entries list, add the path your styles. In my case, I'd add path.resolve('src', 'styles', 'app.css').

Now import the MiniCssExtractPlugin (const MiniCssExtractPlugin = require('mini-css-extract-plugin')), and add this rule to the rules array:

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
  ],
},

Next we need to crate an array for plugins in the exported object, and add an instance of MiniCssExtractPlugin to it:

module.exports = {
  entry: [
    // ...
  ],
  output: {
    // ...
  }
  module: {
    // ...
  },
  plugins: [new MiniCssExtractPlugin()],
};

What's happening here is, we're telling webpack to use our CSS as an entrypoint of stuff to bundle. If you wanted, you could instead import your CSS in your entry javascript file.

The rule we added will make it so webpack can understand what to do with CSS, run it through PostCSS (which we have set up to add prefixes to our styles), then use the MiniCssExtractPlugin plugin to output it to a CSS file.

If you wanted to you could use the style-loader and have your styles applied through javascript. This has drawbacks of depending on javascript to be loaded before styles are applied.

The last thing we need to do is get our styles into our HTML.

By default, the extracted styles will go into a file named main.css. So, in the head of baseof.html, add:

<link rel="stylesheet" href="/assets/main.css">

Now when you restart webpack and visit the site, you should see your styles applied.

Conclusion

If you've completely been following along, then congratulations, we've made a very ugly site! But at least we made it in a cool way 😎.

For the most part, you should be able to go pretty far with this setup (especially if you add something like Sass for your styles. But if you do stick with just PostCSS, be sure to check out postcss-import to help with splitting code).

Pair this setup with a CMS like Forestry.io or Netlify CMS, and setup autodeploying to a service like ZEIT Now or (Netlify)(https://www.netlify.com/), then you'll have a really solid base for building blogs or marketing sites in a really low maitenance way.

Netlify even has a service for adding forms to static sites (other form services available) (https://www.netlify.com/products/forms)

Here's the final webpack related files.

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  entry: [
    path.resolve('src', 'js', 'app.js'),
    path.resolve('src', 'styles', 'app.css'),
  ],
  output: {
    path: path.resolve('static', 'assets'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
  ],
};

// package.json
{
  "private": true,
  "browserslist": "> 1%",
  "scripts": {
    "start": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "core-js": "^3.6.4",
    "css-loader": "^3.4.2",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

`package.json` Tip

I recommend using something like the package npm-run-all.

This package would let you modify your package.json scripts to be something like this:

{
  "scripts": {
    "start": "run-p start:*",
    "start:hugo": "hugo server -D",
    "start:webpack": "webpack --mode=development --watch",
    "build": "run-s build:webpack build:hugo",
    "build:hugo": "hugo",
    "build:webpack": "webpack --mode=production"
  }
  // ...
}

So when you run yarn start or yarn build both webpack and Hugo run their respective commands.

Webpack Dev Server

In my opinion the Hugo server automatically reloading when changes are made to the built assets is good enough for me. Personally I'd rather avoid having more to configure than is needed.

But if you'd prefer to use the webpack dev server, it's pretty easy to drop in.

First add webpack-dev-server as a dev dependency, then modify your webpack config to have devServer options.

{
  devServer: {
    contentBase: path.resolve('public'),
    watchContentBase: true,
    publicPath: '/assets',
  },
  entry: [
    // ...
  ],
  output: {
    // ...
  },
  module: {
    // ...
  },
  plugins: {
    // ...
  },
}

Lastly, instead of running hugo server + webpack --watch you'll run hugo --watch + webpack-dev-server.

What this does is make Hugo build your site whenever you change content or templates, then the webpack dev server will host the built HTML from hugo.