Merge pull request #6 from gargakshit/feature/esbuild
This commit is contained in:
GitHub
commit
4388101be3
3
.gitignore
vendored
3
.gitignore
vendored
@ -36,3 +36,6 @@ npm-debug.log
|
||||
.idea
|
||||
.env
|
||||
.envrc
|
||||
|
||||
# Secret config files
|
||||
config/*.secret.exs
|
||||
|
||||
@ -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
38
assets/build.js
Normal 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);
|
||||
});
|
||||
@ -2,6 +2,14 @@
|
||||
@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;
|
||||
@ -17,7 +25,7 @@ body {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ff9800
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -55,5 +63,3 @@ textarea {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@import './highlight.css';
|
||||
@ -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
8272
assets/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
assets/static/fonts/jetbrains_mono_variable.ttf
Normal file
BIN
assets/static/fonts/jetbrains_mono_variable.ttf
Normal file
Binary file not shown.
@ -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()] : [])
|
||||
}
|
||||
};
|
||||
@ -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"
|
||||
|
||||
24
config/dev.secret.sample.exs
Normal file
24
config/dev.secret.sample.exs
Normal 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
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user