.gitignore

@@ -1 +1,3 @@
 local
+node_modules
+assetpack.db

Dockerfile

@@ -1,3 +1,11 @@
+FROM node:latest
+
+WORKDIR /opt/mojo_app/
+
+COPY mojo_app/package.json .
+COPY mojo_app/package-lock.json .
+RUN npm install
+
 FROM perl:latest
 
 WORKDIR /opt/app/
@@ -6,11 +14,11 @@ COPY cpanfile .
 COPY cpanfile.snapshot .
 COPY mojo_app ./mojo_app/
 
-RUN cpanm Carton && carton install
+RUN cpanm -nv Carton && carton install
+
+WORKDIR /opt/app/mojo_app/
+COPY --from=0 /opt/mojo_app/ .
 
 EXPOSE 3000
 
-WORKDIR /opt/app/mojo_app/
-
 ENTRYPOINT ["carton", "exec", "--", "morbo", "script/mojo_app"]
-

README.md

@@ -16,10 +16,14 @@ Visit `localhost:3000` with web browser.
 
 ## serve app with local changes
 
-### install dependencies
+### install Mojolicious dependencies
 
     $ docker run --rm -v $PWD:/opt/app --entrypoint carton mojo_app install
 
+### install Node packages
+
+    $ docker run --rm --init -w /opt/mojo_app -v $PWD/mojo_app:/opt/mojo_app node npm install
+
 ### start the server
 
     $ docker run --rm -v $PWD:/opt/app -p 3000:3000 mojo_app

cpanfile

@@ -1 +1,2 @@
-requires 'Mojolicious' => '9.48',
+requires 'Mojolicious' => '9.48';
+requires 'Mojolicious::Plugin::AssetPack' => '2.15';

cpanfile.snapshot

@@ -1,5 +1,21 @@
 # carton snapshot format: version 1.0
 DISTRIBUTIONS
+  File-Which-1.27
+    pathname: P/PL/PLICEASE/File-Which-1.27.tar.gz
+    provides:
+      File::Which 1.27
+    requirements:
+      ExtUtils::MakeMaker 0
+      base 0
+      perl 5.006
+  IPC-Run3-0.049
+    pathname: R/RJ/RJBS/IPC-Run3-0.049.tar.gz
+    provides:
+      IPC::Run3 0.049
+    requirements:
+      ExtUtils::MakeMaker 0
+      Test::More 0.31
+      Time::HiRes 0
   Mojolicious-9.48
     pathname: S/SR/SRI/Mojolicious-9.48.tar.gz
     provides:
@@ -120,3 +136,32 @@ DISTRIBUTIONS
       IO::Socket::IP 0.37
       Sub::Util 1.41
       perl 5.016
+  Mojolicious-Plugin-AssetPack-2.15
+    pathname: S/SR/SRI/Mojolicious-Plugin-AssetPack-2.15.tar.gz
+    provides:
+      Mojolicious::Plugin::AssetPack 2.15
+      Mojolicious::Plugin::AssetPack::Asset undef
+      Mojolicious::Plugin::AssetPack::Asset::Null undef
+      Mojolicious::Plugin::AssetPack::Pipe undef
+      Mojolicious::Plugin::AssetPack::Pipe::CoffeeScript undef
+      Mojolicious::Plugin::AssetPack::Pipe::Combine undef
+      Mojolicious::Plugin::AssetPack::Pipe::Css undef
+      Mojolicious::Plugin::AssetPack::Pipe::Favicon undef
+      Mojolicious::Plugin::AssetPack::Pipe::Fetch undef
+      Mojolicious::Plugin::AssetPack::Pipe::JavaScript undef
+      Mojolicious::Plugin::AssetPack::Pipe::Jpeg undef
+      Mojolicious::Plugin::AssetPack::Pipe::Less undef
+      Mojolicious::Plugin::AssetPack::Pipe::Png undef
+      Mojolicious::Plugin::AssetPack::Pipe::Riotjs undef
+      Mojolicious::Plugin::AssetPack::Pipe::RollupJs undef
+      Mojolicious::Plugin::AssetPack::Pipe::Sass undef
+      Mojolicious::Plugin::AssetPack::Pipe::TypeScript undef
+      Mojolicious::Plugin::AssetPack::Pipe::Vuejs undef
+      Mojolicious::Plugin::AssetPack::Store undef
+      Mojolicious::Plugin::AssetPack::Util undef
+      Mojolicious::Plugin::AssetPack::Util::_chdir undef
+    requirements:
+      ExtUtils::MakeMaker 0
+      File::Which 1.21
+      IPC::Run3 0.048
+      Mojolicious 9.34

mojo_app/assets/materialize.css

@@ -0,0 +1 @@
+../node_modules/materialize-css/dist/css/materialize.css

mojo_app/lib/MojoApp.pm

@@ -10,6 +10,9 @@ sub startup ($self) {
   # Configure the application
   $self->secrets($config->{secrets});
 
+  $self->plugin(AssetPack => {pipes => [qw(Css)]});
+  $self->asset->process("app.css" => ("materialize.css"));
+
   # Router
   my $r = $self->routes;
 

mojo_app/package-lock.json

@@ -0,0 +1,18 @@
+{
+  "name": "mojo_app",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "materialize-css": "^1.0.0"
+      }
+    },
+    "node_modules/materialize-css": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz",
+      "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==",
+      "license": "MIT"
+    }
+  }
+}

mojo_app/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "materialize-css": "^1.0.0"
+  }
+}

mojo_app/templates/layouts/default.html.ep

@@ -1,5 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head><title><%= title %></title></head>
+<head>
-  <body><%= content %></body>
+  <title><%= title %></title>
+  %= asset "app.css"
+</head>
+
+<body>
+
+<%= content %>
+</body>
 </html>