Merge pull request #6 from gargakshit/feature/esbuild

This commit is contained in:
Amogh Lele 2021-08-22 17:03:29 +05:30 committed by GitHub
commit 4388101be3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 479 additions and 8040 deletions

5
.gitignore vendored
View File

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

View File

@ -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

38
assets/build.js Normal file
View File

@ -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);
});

View File

@ -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-weight: bold;
font-size: 14px;
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;
font-size: 14px;
font-weight: bold;
white-space: pre;
font-size: 14px;
font-weight: bold;
}
textarea {
font-size: 14px;
font-weight: bold;
font-size: 14px;
font-weight: bold;
}
.alert {
width: 100%;
text-align: center;
width: 100%;
text-align: center;
}
.alert-info {
background-color: #1ed98e;
color: black;
font-weight: bold;
background-color: #1ed98e;
color: black;
font-weight: bold;
}
.alert-danger {
background-color: #ff9800;
color: black;
font-weight: bold;
background-color: #ff9800;
color: black;
font-weight: bold;
}
@import './highlight.css';

View File

@ -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";

8272
assets/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,29 +3,20 @@
"description": " ",
"license": "MIT",
"scripts": {
"deploy": "NODE_ENV=production webpack --mode production",
"watch": "webpack --mode development --watch"
"deploy": "NODE_ENV=production node build.js",
"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",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"hard-source-webpack-plugin": "^0.13.1",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"esbuild": "^0.12.22",
"esbuild-plugin-postcss2": "0.0.9",
"fs-extra": "^10.0.0",
"postcss": "^8.3.6",
"postcss-import": "^14.0.2",
"postcss-loader": "^4.2.0",
"tailwindcss": "^2.2.7",
"terser-webpack-plugin": "^2.3.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.2"
"tailwindcss": "^2.2.7"
}
}

Binary file not shown.

View File

@ -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()] : [])
}
};

View File

@ -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",
"--mode",
"development",
"--watch-stdin",
"build.js",
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"

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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="preconnect" href="https://fonts.googleapis.com">
<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>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
</head>
<body class="flex flex-col ">
<header class="flex w-full justify-between items-center py-3 px-6">