Add webpack.{production,development}.js

Rakefile.rb

@@ -3,24 +3,35 @@ require_relative "rakelib/builders"
 load "twenty-frontend/tasks/nanoc.rake"
 
 namespace :gem do
+  version = File.binread(File.join(Dir.getwd, "VERSION")).chomp
   desc "Build gemspec"
   task :gemspec, [:version] do |t, args|
-    GemSpec.call(args[:version])
+    GemSpec.call(args.version || version)
   end
 
   desc "Copy files to stage directory"
   task :copy, [:version] => [:gemspec] do |t, args|
-    Copy.call(args[:version])
+    Copy.call(args.version || version)
   end
 
   desc "Build gems"
-  task :build, [:version] => ["nanoc:clean", "nanoc:build", :copy] do |t, args|
-    Build.call(args[:version])
+  task :build, [:version] => [:set_env, "nanoc:clean", "nanoc:build", :copy] do |t, args|
+    Build.call(args.version || version)
   end
 
   desc "Deploy gems"
   task :deploy, [:version] => [:build] do |t, args|
-    Deploy.call(args[:version])
+    Deploy.call(args.version || version)
+  end
+
+  task :set_env, [:version] => [:set_version] do |t,args|
+    ENV["buildenv"] ||= "production"
+  end
+
+  task :set_version, [:version] do |t,args|
+    next unless args.version
+    File.binwrite File.join(Dir.getwd, "VERSION"),
+                  "#{args.version}\n"
   end
 end
 

VERSION

@@ -0,0 +1 @@
+0.3.4

twenty-frontend/Rules

@@ -1,6 +1,11 @@
 #!/usr/bin/env ruby
 require "nanoc-webpack"
 
+buildenv = ENV["buildenv"] || "development"
+Nanoc::Webpack.default_options.merge!(
+  "--config" => "webpack.#{buildenv}.js"
+)
+
 def require_rules(rules, locals = {}, target = binding)
   locals.each { target.local_variable_set(_1, _2) }
   path = File.join(Dir.getwd, rules)

twenty-frontend/package-lock.json

@@ -29,7 +29,8 @@
         "tslib": "^2.2.0",
         "typescript": "^4.8.2",
         "webpack": "^5.74.0",
-        "webpack-cli": "^4.10.0"
+        "webpack-cli": "^4.10.0",
+        "webpack-merge": "^5.10.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {

twenty-frontend/package.json

@@ -1,9 +1,6 @@
 {
   "name": "twenty",
   "devDependencies": {
-    "classnames": "^2.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "@apollo/client": "^3.3.21",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/typescript": "^4.0.1",
@@ -12,11 +9,14 @@
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "@types/showdown": "^2.0.6",
+    "classnames": "^2.3.2",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "graphql": "^16.8.1",
     "luxon": "^3.4.4",
     "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
     "showdown": "^2.1.0",
     "ts-loader": "^9.3.1",
@@ -24,7 +24,8 @@
     "tslib": "^2.2.0",
     "typescript": "^4.8.2",
     "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.10.0"
   },
   "scripts": {
     "eslint": "npm exec eslint -- --fix src/js/",

twenty-frontend/tasks/nanoc.rake

@@ -11,12 +11,11 @@ namespace :nanoc do
   end
 
   desc "Produce the build/ directory"
-  task :build do
+  task :build, [:buildenv] do |t, args|
     Dir.chdir(cwd) do
-      # FIXME: discover why rm -rf build/css/ is needed.
-      ENV["NODE_ENV"] = "production"
+      buildenv = args.buildenv || ENV["buildenv"] || "development"
       sh "rm -rf build/css/"
-      Bundler.with_unbundled_env { sh "bundle exec nanoc co" }
+      Bundler.with_unbundled_env { sh "buildenv=#{buildenv} bundle exec nanoc co" }
     end
   end
 

twenty-frontend/webpack.common.js

@@ -1,9 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
-const process = require('process');
 
 module.exports = {
-  mode: process.env.NODE_ENV || "development",
   resolve: {
     alias: {
       '~': [path.resolve('src/js')]

twenty-frontend/webpack.development.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(
+  common,
+  {mode: "development"}
+)

twenty-frontend/webpack.production.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(
+  common,
+  {mode: "production"}
+)