nix-elm-webpack project base 2019-02

Makefile

SOURCES_ELM=$(shell find src -name '*.elm')

NIX_BRANCH=nixos-18.09

.PHONY: shell
shell:
	nix-shell

.PHONY: format
format:
	elm-format --yes src

.PHONY: watch
watch:
	./node_modules/.bin/webpack-serve

.PHONY: build
build: public

public: $(SOURCES_ELM) Makefile webpack.config.js node_modules
	mkdir -p public
	./node_modules/.bin/webpack --progress --colors --bail
	touch public

.PHONY: clean
clean: clean-public

.PHONY: clean-public
clean-public:
	rm -fr public

# Plumbing

.PHONY: nix-%
nix-%:
	@echo "run inside nix-shell: $*"
	nix-shell --pure --run "$(MAKE) $*"

node_modules: package.json package-lock.json
	npm ci
	touch node_modules

# Upgrade to the latest commit of the selected nixpkgs branch
.PHONY: upgrade
upgrade: NIX_FILE=shell.nix
upgrade:
	@echo "Updating nixpkgs from branch: $(NIX_BRANCH)"; \
	set -e pipefail; \
	rev=$$(curl https://api.github.com/repos/NixOS/nixpkgs-channels/branches/$(NIX_BRANCH) | jq -er .commit.sha); \
	echo "Updating nixpkgs to hash: $$rev"; \
	sha=$$(nix-prefetch-url --unpack https://github.com/NixOS/nixpkgs-channels/archive/$$rev.tar.gz); \
	sed -i \
		-e "2s|.*|    # $(NIX_BRANCH)|" \
		-e "3s|.*|    url = \"https://github.com/NixOS/nixpkgs-channels/archive/$$rev.tar.gz\";|" \
		-e "4s|.*|    sha256 = \"$$sha\";|" \
		$(NIX_FILE)

package.json

{
  "name": "myproject",
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "connect-history-api-fallback": "^1.6.0",
    "elm-webpack-loader": "^5.0.0",
    "html-webpack-plugin": "^3.2.0",
    "koa-connect": "^2.0.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "webpack-serve": "^2.0.3",
    "write-file-webpack-plugin": "^4.5.0"
  }
}

shell.nix

{ pkgs ? import (fetchTarball {
    # nixos-18.09
    url = "https://github.com/NixOS/nixpkgs-channels/archive/50f41ea2fcf86def32799f75577a4fe5cfd1132e.tar.gz";
    sha256 = "1q0bxl5nxx1kabqvyzkdw91c5dnwpi2rwsgs5jdmnj7f0qqgdxh8";
  }) {}
}:

pkgs.stdenv.mkDerivation rec {
  name = "elm-env";
  buildInputs = with pkgs; [
    elmPackages.elm
    elmPackages.elm-format
    nodejs-10_x
  ];
  shellHook = ''
    export SSL_CERT_FILE=${pkgs.cacert}/etc/ssl/certs/ca-bundle.crt
  '';
}

webpack.config.js

/* eslint-disable no-unused-vars,no-console */
/* globals __dirname, require, process */

const CleanWebpackPlugin = require('clean-webpack-plugin');
const convert = require('koa-connect');
const history = require('connect-history-api-fallback');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const path = require('path');
const WriteFileWebpackPlugin = require('write-file-webpack-plugin');

const PRODUCTION = 'production';
const DEVELOPMENT = 'development';

const TARGET_ENV =
	path.basename(process.argv[1]) === 'webpack'
		? PRODUCTION
		: DEVELOPMENT;

const PATHS = {
	src: path.join(__dirname, 'src'),
	build: path.join(__dirname, 'public'),
	publicPath: '/'
};

console.log('Building for environment: ' + TARGET_ENV);

const parts = {
	entry: {
		resolve: {
			extensions: [".js", ".elm"]
		},
		entry: path.join(PATHS.src, "index.js")
	},

	elm: {
		module: {
			noParse: /\.elm$/,
			rules: [
				{
					test: /\.elm$/,
					include: [path.join(PATHS.src, "elm")],
					exclude: [/elm-stuff/, /node_modules/],
					use: {
						loader: 'elm-webpack-loader',
						options: {
							cwd: __dirname,
							debug: TARGET_ENV === DEVELOPMENT,
							optimize: TARGET_ENV === PRODUCTION,
							verbose: true
						}
					}
				}
			]
		}
	},

	styles: {
	},

	assets: {
	},

	html: {
		plugins: [
			new HtmlWebpackPlugin({
				template: path.join(PATHS.src, 'index.html')
			})
		]
	},

	build: {
		mode: 'production',
		output: {
			filename: '[name].[chunkhash].js',
			chunkFilename: '[chunkhash].js',
			path: PATHS.build,
			publicPath: PATHS.publicPath
		},
		optimization: {
			splitChunks: {
				cacheGroups: {
					commons: {
						test: /[\\/]node_modules[\\/]/,
						name: 'vendors',
						chunks: 'initial'
					}
				}
			}
		},
		plugins: [
			new CleanWebpackPlugin([PATHS.build], {
				verbose: true
			})
		]
	},

	watch: {
		mode: 'development',
		output: {
			filename: 'bundle.js',
			path: PATHS.build,
			publicPath: PATHS.publicPath
		},
		devtool: 'source-map',
		plugins: [
			new WriteFileWebpackPlugin()
		],
		serve: {
			hot: true,
			dev: {
				publicPath: PATHS.publicPath
			},
			add: (app, middleware, options) => {
				app.use(convert(history()));
			}
		}
	}
};


module.exports =
	merge([
		parts.entry,
		parts.elm,
		parts.assets,
		parts.styles,
		parts.html,
		TARGET_ENV === PRODUCTION ? parts.build : parts.watch
	]);