Frontend compiler to use in Processwire

[Angelino]

I'm aware of that Processwire is a headless CMS, but is there is nothing that is already setup to use in 2024? Like a Vite or a Webpack boilerplate to use with tailwindcss. Maybe someone that has already setup this things in the community and will share the config files? Hot reload would be nice to, i got some old projects but they use Grunt butisn't this oldschool in 2024. I spended hours already to get setup things like this myself so a push in the right direction would be nice to have. Thanks in advance.

[bernhard]

You can have a look at https://github.com/baumrock/site-rockfrontend

[Angelino]

Ok, i looked at the above post. But i managed to make myself a bit of a solution. I did use AdminStyleRock from it, i liked this module.

Here is my package.json:

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "cross-env NODE_ENV=development webpack --watch --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.24.9",
    "@babel/preset-env": "^7.24.8",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "browser-sync": "^2.29.3",
    "browser-sync-webpack-plugin": "^2.3.0",
    "copy-webpack-plugin": "^12.0.2",
    "cross-env": "^7.0.3",
    "css-loader": "^7.1.2",
    "dotenv": "^16.4.5",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss": "^8.4.39",
    "postcss-loader": "^8.1.1",
    "sass": "^1.77.8",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "tailwindcss": "^3.4.6",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4",
    "webpack-manifest-plugin": "^5.0.0"
  }
}

My webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const CopyPlugin = require("copy-webpack-plugin");

const devMode = process.env.NODE_ENV !== "production";

const config = {
  mode: devMode ? 'development' : 'production',
  entry: {
    index: path.resolve(__dirname, "./src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: devMode ? "[name].js" : "[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: './fonts/[name][ext]',
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? "[name].css" : "[name].[contenthash].css",
    }),
    new WebpackManifestPlugin({
      fileName: path.resolve(__dirname, 'dist/manifest.json'),
      publicPath: '/dist/',
      filter: (fileDescriptor) => {
        // Exclude .png, .jpg, and .ttf files etc. from the manifest
        const excludedExtensions = ['.png', '.jpg', 'svg', 'jpeg', 'gif', '.ttf', 'woff', 'woff2', 'eot', 'otf'];
        return !excludedExtensions.some(extension => fileDescriptor.path.endsWith(extension));
      },
    }),
    new CopyPlugin({
      patterns: [
        { from: "./src/assets/fonts", to: "fonts" },
        { from: "./src/assets/images", to: "images" },
      ],
    }),
  ],
};

if (devMode) {
  config.plugins.push(
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      files: ['../site/templates/**/*.php'],
      proxy: 'http://place here your localhost/',
    })
  );
}

module.exports = config;

My tailwindcss.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./site/templates/**/*.php"],
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    extend: {
      fontFamily: {
        'arpona': ['Arpona', 'sans-serif'],
        'avantbold': ['ITCAvantGardeStdBold', 'sans-serif'],
        'avantnormal': ['AvantGardeStdLight', 'sans-serif'],
      },
  },
  plugins: [],
}

My postcss.config.js:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('./tailwind.config.js'),
    require('autoprefixer')
  ],
};

My SCSS tailwindcss file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

// Fontawesome import and custom font-face
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

// Make font-family a custom value, if you using a font like:
// Arpona_ExtraBold = Arpona
// or ITCAvantGardeStd-Bold = ITCAvantGardeStdBold

@font-face {
    font-family: 'Arpona';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Arpona_ExtraBold.otf");
}
@font-face {
    font-family: 'ITCAvantGardeStdBold';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/ITCAvantGardeStd-Bold.ttf");
}
@font-face {
    font-family: 'AvantGardeStdLight';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/ITCAvantGardeStd-Bk.ttf");
}

With this configurated you can use tailwindcss, also on save the webpage will reload.

npm run watch

I hope i can help out some users.