Regex within a template inline tag

calypso

Hello everyone
I would like to run my react app, which is built with webpack. Everything works fine.
But in the app.html.eex, I need to hardcode to css filename, which contains the contenthash generated by webpack. This contenthash can change and therefore I need to wildcard this to main.*.css.
Is this possible and if yes, how?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Test · Phoenix Framework</title>
    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/main.js") %>"></script>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/main.68fc705c4c27d56f9522.css") %>"/>
  </head>
  <body>
  </body>
</html>

Best,
Calypso

3 comments

/phoenix #regex #phoenix-html-template

0 1094 3

2021-08-06 19:38:36 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

kokolegorille

Are You using your own webpack outside of Phoenix?

This should be managed with mix phx.digest and You shouldn’t need to know the hash.

Post #1

calypso

Thanks for the reply!

I’m using a custom webpack.config.ts, which is located in assets folder. Consequently, I configured in my dev.exs

config :app_web, AppWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch",
      "--watch-options-stdin",
      "--config",
      "webpack.dev.config.ts",
      cd: Path.expand("../apps/app_web/assets", __DIR__)
    ]
  ]

In the plugins section of the webpack.config.ts we see how the name of the .css is generated. Of course I can just change that to a static filename, that never changes like style.css. Then of course it is easy to load that file in the app.html.eex.

plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: "[name].[contenthash].css"
    }),
  ]

I do not quite get now mix phx.digest comes into play.

Post #2

kokolegorille

$ mix help phx.digest

                                 mix phx.digest                                 

Digests and compresses static files.

    mix phx.digest
    mix phx.digest priv/static -o /www/public

The first argument is the path where the static files are located. The -o
option indicates the path that will be used to save the digested and compressed
files.

If no path is given, it will use priv/static as the input and output path.

The output folder will contain:

  • the original file
  • the file compressed with gzip
  • a file containing the original file name and its digest
  • a compressed file containing the file name and its digest
  • a cache manifest file

Example of generated files:

  • app.js
  • app.js.gz
  • app-eb0a5b9302e8d32828d8a73f137cc8f0.js
  • app-eb0a5b9302e8d32828d8a73f137cc8f0.js.gz
  • cache_manifest.json

Post #3

— All posts loaded —