Heroku missing stylesheet

Havardpede

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.

7 comments

/phoenix #deployment #heroku #troubleshooting #tailwindcss

0 2813 7

2020-02-18 23:57:06 UTC

First 7 of 7 Posts

outlog

what is in your compile file? see GitHub - gjaldon/heroku-buildpack-phoenix-static: A Heroku buildpack for building Phoenix's static assets · GitHub

Post #1

Havardpede

I am currently using the default compile file:

if [ -f "$assets_dir/yarn.lock" ]; then
  yarn deploy
else
  npm run deploy
fi

cd $phoenix_dir

mix "${phoenix_ex}.digest"

if mix help "${phoenix_ex}.digest.clean" 1>/dev/null 2>&1; then
  mix "${phoenix_ex}.digest.clean"
fi

Post #2

Havardpede

I tried mix phx.digest locally again, and managed to recreate the issue.

the file app-0231d5a0f0da253dc7450232215221d5.css was created in priv/static/css
with the following content.

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

a {
	background-color: transparent
}

b {
	font-weight: bolder
}

[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

[hidden] {
	display: none
}

p {
	margin: 0
}

*,
:after,
:before {
	box-sizing: border-box;
	border: 0 solid #e2e8f0
}

[role=button] {
	cursor: pointer
}

a {
	color: inherit;
	text-decoration: inherit
}

:root {
	--main-orange: #eba134;
	--payne: #606c76;
	--azure: #e2e8f0
}

form {
	margin-bottom: 0!important
}

This part is from app.css, which makes it seem like only the tailwind assets css is missing.

:root {
  --main-orange: #eba134;
  --payne: #606c76;
  --azure: #e2e8f0;
}

update: The app.css file in priv/static/css was created correctly when i started the application.

Post #3

Havardpede

I have now removed /priv/static/ from .gitignore and it worked.

Post #4

outlog

you really don’t want to do that - you’ll get burned down the line.. do you have parity between dev/prod eg same node version etc..

also what is in you package.json scripts? is the deploy script correct?

Post #5

Havardpede

Yeah that was my thought too.
All the tools required for the buildpacks are set to the exact same version as in my dev environment.
these are the scripts in package.json

"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"

Really appreciate your help, @outlog

Post #6

Havardpede

I realized I had both tailwindcss and the postcss dependencies within devdependencies rather than dependencies. I dont know if this would make a difference during the build process or not. This is how the package.json is structured:

{
  "version": "1.0.0",
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@types/node": "^13.7.1",
    "@types/phoenix": "^1.4.3",
    "autoprefixer": "^9.7.4",
    "axios": "^0.19.2",
    "brunch": "^3.0.0",
    "js-yaml": "^3.13.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-purgecss": "^2.0.3",
    "source-map-loader": "^0.2.4",
    "tailwindcss": "^1.2.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^4.5.0",
    "css-loader": "^2.1.1",
    "glob-all": "^3.1.0",
    "merge": "^1.2.1",
    "mini-css-extract-plugin": "^0.4.0",
    "optimize-css-assets-webpack-plugin": "^4.0.0",
    "purgecss": "^1.4.2",
    "purgecss-webpack-plugin": "^1.6.0",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

Post #7

— All posts loaded —