Hey I am currently lost. I have finally managed to deploy my phoenix project to Heroku. However, it does not manage to digest the assets. or more specifically, the stylesheets.
when calling mix phx.digest locally, it produces the assets as expected. however, this does not seem to be the case when I use heroku. I have the following build packs.
1. https://github.com/HashNuke/heroku-buildpack-elixir
2. https://github.com/gjaldon/heroku-buildpack-phoenix-static.git
in assets/js/app.js:
import css from "../css/app.css";
config/prod.exs:
cache_static_manifest: "priv/static/cache_manifest.json"
phoenix_static_buildpack.config:
clean_cache=false
# We can change the filename for the compile script with this option
compile="compile"
# We can set the version of Node to use for the app here
node_version=13.8.0
# We can set the version of NPM to use for the app here
npm_version=6.13
# We can set the version of Yarn to use for the app here
yarn_version=1.22.0
# We can set the path to phoenix app. E.g. apps/phoenix_app when in umbrella.
phoenix_relative_path=.
# Remove node and node_modules directory to keep slug size down if it is not needed.
remove_node=false
# We can change path that npm dependencies are in relation to phoenix app. E.g. assets for phoenix 1.3 support.
assets_path=assets
# We can change phoenix mix namespace tasks. E.g. `phoenix` for phoenix < 1.3 support.
phoenix_ex=phx
my webpack:
const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const globAll = require("glob-all");
// Custom PurgeCSS extractor for Tailwind that allows special characters in
// class names.
//
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]/g) || [];
}
}
module.exports = (env, options) => ({
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({}),
new PurgecssPlugin({
paths: globAll.sync([
"../lib/myapp_web/templates/**/*.html.eex",
"../lib/myapp_web/views/**/*.ex",
"../assets/js/**/*.ts",
"../assets/js/**/*.js"
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ["leex", "eex", "ex", "html", "js"]
}
]
})
]
},
entry: {
"./js/app.js": glob.sync("./vendor/**/*.js").concat(["./js/app.js"])
},
output: {
filename: "app.js",
path: path.resolve(__dirname, "../priv/static/js")
},
module: {
rules: [
{
test: /\.ts?$/,
exclude: /node_modules/,
use: {
loader: "ts-loader"
}
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
// Use the postcss-loader
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
plugins: [
new MiniCssExtractPlugin({
// create a generatated css file
filename: '../css/app.css'
}),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
});
I am currently using TailwindCSS, and also tried to use TS instead of JS, but mostly undid it, as I thought it might have been the culprit.
