🚧 🔧 make nextjs/tailwind working in Docker

marigold-dev · Aug 21, 2023 · a67ae64 · a67ae64
1 parent 2868391
commit a67ae64
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 28 deletions.
diff --git a/batcher-ui/Dockerfile.ghostnet b/batcher-ui/Dockerfile.ghostnet
@@ -2,10 +2,10 @@ FROM node:latest as builder
 
 WORKDIR /app
 
-COPY ./package.json ./
-
 ENV ENV ghostnet
 
+COPY ./package.json ./
+
 RUN npm install
 
 COPY ./tsconfig.json ./jsconfig.json ./
@@ -18,15 +18,17 @@ COPY ./styles ./styles
 COPY ./public ./public
 COPY ./img ./img
 COPY ./config ./config
+COPY ./postcss.config.js ./postcss.config.js
+COPY ./next.config.js ./next.config.js
+COPY ./tailwind.config.js ./tailwind.config.js
 
-COPY .env.dev.sample .env.production
 
 RUN npm run build:next:ghostnet
 
-EXPOSE 80
+EXPOSE 3000
 
 CMD ["npm", "run", "start:next:ghostnet"]
 
 # FROM nginx:latest
 
-# COPY --from=builder /app/dist /usr/share/nginx/html
+# COPY --from=builder /app /usr/share/nginx/html
diff --git a/batcher-ui/next.config.js b/batcher-ui/next.config.js
@@ -9,29 +9,29 @@ const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   env: config[env],
-  webpack: (config, { isServer, webpack }) => {
-    console.log(isServer);
-    if (!isServer) config.resolve.fallback['fs'] = false;
+  // webpack: (config, { isServer, webpack }) => {
+  //   console.log(isServer);
+  //   if (!isServer) config.resolve.fallback['fs'] = false;
 
-    const fallback = config.resolve.fallback || {};
-    Object.assign(fallback, {
-      crypto: require.resolve('crypto-browserify'),
-      stream: require.resolve('stream-browserify'),
-      assert: require.resolve('assert'),
-      http: require.resolve('stream-http'),
-      https: require.resolve('https-browserify'),
-      os: require.resolve('os-browserify'),
-      url: require.resolve('url'),
-    });
-    config.resolve.fallback = fallback;
-    config.plugins = (config.plugins || []).concat([
-      new webpack.ProvidePlugin({
-        process: 'process/browser',
-        Buffer: ['buffer', 'Buffer'],
-      }),
-    ]);
-    return config;
-  },
+  //   const fallback = config.resolve.fallback || {};
+  //   Object.assign(fallback, {
+  //     crypto: require.resolve('crypto-browserify'),
+  //     stream: require.resolve('stream-browserify'),
+  //     assert: require.resolve('assert'),
+  //     http: require.resolve('stream-http'),
+  //     https: require.resolve('https-browserify'),
+  //     os: require.resolve('os-browserify'),
+  //     url: require.resolve('url'),
+  //   });
+  //   config.resolve.fallback = fallback;
+  //   config.plugins = (config.plugins || []).concat([
+  //     new webpack.ProvidePlugin({
+  //       process: 'process/browser',
+  //       Buffer: ['buffer', 'Buffer'],
+  //     }),
+  //   ]);
+  //   return config;
+  // },
 };
 
 module.exports = nextConfig;
diff --git a/batcher-ui/styles/globals.css b/batcher-ui/styles/globals.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;500&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/batcher-ui/tailwind.config.js b/batcher-ui/tailwind.config.js
@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {