Merge pull request #6 from gargakshit/feature/esbuild

.gitignore

@@ -35,4 +35,7 @@ npm-debug.log
 /priv/native/
 .idea
 .env
-.envrc
+.envrc
+
+# Secret config files
+config/*.secret.exs

README.md

@@ -2,6 +2,8 @@
 
 To start your Phoenix server:
 
+  * Copy `config/dev.secret.sample.exs` to `config/dev.secret.exs`
+  * Fill in the SMTP and database configuration in `config/dev.secret.exs`
   * Install dependencies with `mix deps.get`
   * Create and migrate your database with `mix ecto.setup`
   * Install Node.js dependencies with `npm install` inside the `assets` directory

assets/build.js

@@ -0,0 +1,38 @@
+const fs = require("fs-extra");
+const esbuild = require("esbuild");
+const { default: postCSSPlugin } = require("esbuild-plugin-postcss2");
+
+// PostCSS Plugins
+const autoprefixer = require("autoprefixer");
+const tailwindcss = require("tailwindcss");
+const postcssImport = require("postcss-import");
+
+const productionBuild = process.env.NODE_ENV === "production";
+fs.copySync("static/", "../priv/static/");
+
+console.log("[build.js] [info] Copying static files from static/");
+
+if (!productionBuild) {
+  console.log("[build.js] [info] Starting to watching assets for changes");
+} else {
+  console.log("[build.js] [info] Building assets in production mode");
+}
+
+esbuild
+  .build({
+    entryPoints: ["js/app.js"],
+    bundle: true,
+    outfile: "../priv/static/assets/app.js",
+    minify: productionBuild,
+    watch: !productionBuild,
+    external: ["*.ttf"],
+    plugins: [
+      postCSSPlugin({
+        plugins: [postcssImport, tailwindcss, autoprefixer],
+      }),
+    ],
+  })
+  .catch((e) => {
+    console.error(`[build.js] [error] ${e}`);
+    process.exit(1);
+  });

assets/css/app.css

@@ -2,12 +2,20 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "./highlight.css";
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url(/fonts/jetbrains_mono_variable.ttf);
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+}
 
 * {
   font-family: "JetBrains Mono", monospace;
   color: white;
-	font-size: 14px;
+  font-size: 14px;
-	font-weight: bold;
+  font-weight: bold;
 }
 
 html,
@@ -17,7 +25,7 @@ body {
 }
 
 a:hover {
-  color: #ff9800
+  color: #ff9800;
 }
 
 header {
@@ -29,31 +37,29 @@ code {
 }
 
 code {
-	white-space: pre;
+  white-space: pre;
-	font-size: 14px;
+  font-size: 14px;
-	font-weight: bold;
+  font-weight: bold;
 }
 
 textarea {
-	font-size: 14px;
+  font-size: 14px;
-	font-weight: bold;
+  font-weight: bold;
 }
 
 .alert {
-	width: 100%;
+  width: 100%;
-	text-align: center;
+  text-align: center;
 }
 
 .alert-info {
-	background-color: #1ed98e;
+  background-color: #1ed98e;
-	color: black;
+  color: black;
-	font-weight: bold;
+  font-weight: bold;
 }
 
 .alert-danger {
-	background-color: #ff9800;
+  background-color: #ff9800;
-	color: black;
+  color: black;
-	font-weight: bold;
+  font-weight: bold;
 }
-
-@import './highlight.css';

assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.css"
+import "../css/app.css";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -12,4 +12,4 @@ import "../css/app.css"
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
-import "phoenix_html"
+import "phoenix_html";

assets/package.json

@@ -3,29 +3,20 @@
   "description": " ",
   "license": "MIT",
   "scripts": {
-    "deploy": "NODE_ENV=production webpack --mode production",
+    "deploy": "NODE_ENV=production node build.js",
-    "watch": "webpack --mode development --watch"
+    "watch": "node build.js"
   },
   "dependencies": {
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
     "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.0.0",
+    "esbuild": "^0.12.22",
-    "copy-webpack-plugin": "^5.1.1",
+    "esbuild-plugin-postcss2": "0.0.9",
-    "css-loader": "^3.4.2",
+    "fs-extra": "^10.0.0",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
-    "postcss-loader": "^4.2.0",
+    "tailwindcss": "^2.2.7"
-    "tailwindcss": "^2.2.7",
-    "terser-webpack-plugin": "^2.3.2",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.2"
   }
 }

assets/webpack.config.js

@@ -1,57 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-module.exports = (env, options) => {
-  const devMode = options.mode !== 'production';
-
-	const PATHS = {
-		src: path.join(__dirname, '../')
-	}
-
-  return {
-    optimization: {
-      minimizer: [
-        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
-      ]
-    },
-    entry: {
-      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
-    },
-    output: {
-      filename: '[name].js',
-      path: path.resolve(__dirname, '../priv/static/js'),
-      publicPath: '/js/'
-    },
-    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader'
-          }
-        },
-        {
-          test: /\.[s]?css$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            'css-loader',
-						'postcss-loader',
-          ],
-        }
-      ]
-    },
-    plugins: [
-      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
-    ]
-    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
-  }
-};

config/dev.exs

@@ -1,14 +1,5 @@
 use Mix.Config
 
-# Configure your database
-config :ketbin, Ketbin.Repo,
-  username: "postgres",
-  password: "postgres",
-  database: "ketbin_dev",
-  hostname: "localhost",
-  show_sensitive_data_on_connection_error: true,
-  pool_size: 10
-
 # For development, we disable any cache and enable
 # debugging and code reloading.
 #
@@ -22,40 +13,11 @@ config :ketbin, KetbinWeb.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/webpack/bin/webpack.js",
+      "build.js",
-      "--mode",
-      "development",
-      "--watch-stdin",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]
 
-smtp_relay =
-  System.get_env("SWOOSH_SMTP_RELAY") ||
-    raise """
-    environment variable SWOOSH_SMTP_RELAY is missing.
-    """
-username =
-  System.get_env("SWOOSH_USERNAME") ||
-    raise """
-    environment variable SWOOSH_USERNAME is missing.
-    """
-password =
-  System.get_env("SWOOSH_PASSWORD") ||
-    raise """
-    environment variable SWOOSH_PASSWORD is missing.
-    """
-
-# configure mailer
-config :ketbin, Ketbin.Mailer,
-  adapter: Swoosh.Adapters.SMTP,
-  relay: smtp_relay,
-  username: username,
-  password: password,
-  tls: :always,
-  auth: :always,
-  port: 587
-
 # ## SSL Support
 #
 # In order to use HTTPS in development, a self-signed
@@ -100,3 +62,6 @@ config :phoenix, :stacktrace_depth, 20
 
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
+
+# Import the secrets config
+import_config "dev.secret.exs"

config/dev.secret.sample.exs

@@ -0,0 +1,24 @@
+import Mix.Config
+
+# Configure your database
+config :ketbin, Ketbin.Repo,
+  username: "postgres",
+  password: "postgres",
+  database: "ketbin_dev",
+  hostname: "localhost",
+  show_sensitive_data_on_connection_error: true,
+  pool_size: 10
+
+smtp_relay = "<Your SMTP Relay Here>"
+username = "<Your SMTP username here>"
+password = "<Your SMTP password here>"
+
+# configure mailer
+config :ketbin, Ketbin.Mailer,
+  adapter: Swoosh.Adapters.SMTP,
+  relay: smtp_relay,
+  username: username,
+  password: password,
+  tls: :always,
+  auth: :always,
+  port: 587

lib/ketbin_web/endpoint.ex

@@ -24,7 +24,7 @@ defmodule KetbinWeb.Endpoint do
     at: "/",
     from: :ketbin,
     gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(assets fonts images favicon.ico robots.txt)
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.

lib/ketbin_web/router.ex

@@ -59,7 +59,9 @@ defmodule KetbinWeb.Router do
 
     scope "/" do
       pipe_through :browser
+
       live_dashboard "/dashboard", metrics: KetbinWeb.Telemetry
+      forward "/mailbox", Plug.Swoosh.MailboxPreview
     end
   end
 

lib/ketbin_web/templates/layout/app.html.eex

@@ -5,11 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Katbin</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
   <body class="flex flex-col ">
     <header class="flex w-full justify-between items-center py-3 px-6">