Skip to content

Commit 5ac9ee6

Browse files
serifcolakelserifcolakel
committed
Refactor social links component and update styling in container app
1 parent 5704168 commit 5ac9ee6

File tree

1 file changed

+363
-0
lines changed

1 file changed

+363
-0
lines changed

‎SHADCN_UI_SETUP.md

+363
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,363 @@
1+
# Shared UI Setup For Micro Frontend Application (Module Federation with React) with Nx Workspace
2+
3+
This tutorial will guide you through setting up a shared `UI library` for a `Micro Frontend Application` using Nx Workspace, React, and Tailwind CSS. We will use `Shadcn UI` for the UI components.
4+
5+
## Link for Final Implementation
6+
7+
The final implementation of the tutorial can be found in the following repository commits:
8+
9+
- [Add UI package with Shadcn components and use them on apps](https://github.com/serifcolakel/mfe-tutorial/commit/5704168095b2c83b8b51823ed585a1cdf3210dbc)
10+
- [Add UI package with Button component and update dependencies](https://github.com/serifcolakel/mfe-tutorial/commit/cafa9a12f9c95a9a1536ff4e11c2a2008a3d89a5)
11+
12+
> Live Demo: [Micro Frontend Application with Nx Workspace](https://relaxed-mochi-7581fa.netlify.app/)
13+
14+
## Prerequisites
15+
16+
Before we begin, make sure you have the following things set up:
17+
18+
- [Base Repository](https://javascript.plainenglish.io/creating-nx-workspace-with-eslint-prettier-and-husky-configuration-b5f4d2fcb914) for creating Nx Workspace with ESLint, Prettier, and Husky Configuration.
19+
- [Building a Micro Frontend Architecture with Nx Workspace](https://medium.com/javascript-in-plain-english/building-a-micro-frontend-architecture-with-nx-workspace-c0fd9b6bf322) for creating a micro frontend architecture using Nx Workspace.
20+
- [Shared Tailwind Setup For Micro Frontend Application with Nx Workspace](https://medium.com/javascript-in-plain-english/shared-tailwind-setup-for-micro-frontend-application-with-nx-workspace-0c02a3ca097d)
21+
- [Nx Workspace](https://nx.dev/nx-api/react): Nx is a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft.
22+
- [Nx Console](https://nx.dev/recipes/nx-console#nx-console): Nx Console is a Visual Studio Code extension that provides a UI for the Nx CLI.
23+
- [React](https://reactjs.org/): A JavaScript library for building user interfaces.
24+
- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs.
25+
- [ESLint](https://eslint.org/): A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
26+
- [Prettier](https://prettier.io/): An opinionated code formatter that enforces a consistent code style.
27+
- [Netlify](https://www.netlify.com/): A platform that provides continuous deployment, serverless functions, and more.
28+
- [Shadcn UI](https://ui.shadcn.com/docs): Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
29+
30+
## Table of Contents
31+
32+
- [Create UI Library](#create-ui-library)
33+
- [Add Tailwind CSS Setup](#add-tailwind-css-setup)
34+
- [Shadcn UI Setup](#shadcn-ui-setup)
35+
- [Add Button Component](#add-button-component)
36+
- [Add Shadcn UI Hover Card](#add-shadcn-ui-hover-card)
37+
- [Add Shadcn UI Badge](#add-shadcn-ui-badge)
38+
- [Conclusion](#conclusion)
39+
40+
## Create UI Library
41+
42+
First, we need to create a UI library using the Nx Workspace. We will use the `@nx/react:library` generator to create the UI library.
43+
44+
> With Script
45+
46+
```bash
47+
pnpm exec nx generate @nx/react:library --name=ui --bundler=vite --directory=packages/ui --projectNameAndRootFormat=as-provided --no-interactive
48+
```
49+
50+
> With Nx Console
51+
52+
![Nx Console](https://i.hizliresim.com/przb27y.png)
53+
54+
## Add Tailwind CSS Setup
55+
56+
Next, we need to add the Tailwind CSS setup to the UI library. We will use the `@nx/react:setup-tailwind` generator to add the Tailwind CSS setup.
57+
58+
```bash
59+
pnpm exec nx generate @nx/react:setup-tailwind --project=ui --no-interactive
60+
```
61+
62+
- **Configure Tailwind Config** : Update the `packages/ui/tailwind.config.js` file with the following content:
63+
64+
```js
65+
/* eslint-disable @typescript-eslint/unbound-method */
66+
/* eslint-disable @typescript-eslint/no-var-requires */
67+
const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
68+
const { join } = require('path');
69+
const baseConfig = require('../../tailwind.config');
70+
71+
/** @type {import('tailwindcss').Config} */
72+
module.exports = {
73+
content: [
74+
...(baseConfig?.content || []),
75+
join(
76+
__dirname,
77+
'{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
78+
),
79+
...createGlobPatternsForDependencies(__dirname),
80+
],
81+
...baseConfig,
82+
};
83+
```
84+
85+
- **Configure PostCSS Config** : Update the `packages/ui/postcss.config.js` file with the following content:
86+
87+
```js
88+
/* eslint-disable @typescript-eslint/unbound-method */
89+
const { join } = require('path');
90+
91+
// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
92+
// option from your application's configuration (i.e. project.json).
93+
//
94+
// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
95+
96+
module.exports = {
97+
plugins: {
98+
tailwindcss: {
99+
config: join(__dirname, 'tailwind.config.js'),
100+
},
101+
autoprefixer: {},
102+
},
103+
};
104+
```
105+
106+
Now, the UI library is ready with the Tailwind CSS setup. We can start adding UI components to the library.
107+
108+
## Shadcn UI Setup
109+
110+
This section will guide you through setting up the Shadcn UI components in the UI library. `Shadcn UI` provides beautifully designed components that you can copy and paste into your apps and customize them as needed.
111+
112+
First, we need to install the `Shadcn UI` package in the UI library. We will use the `@shadcn/ui` package for the UI components.
113+
114+
- **Install Shadcn UI Package** : Run the following command to install the `@shadcn/ui` package in the UI library:
115+
116+
```bash
117+
pnpm dlx shadcn-ui@latest init
118+
```
119+
120+
- **Select Configuration** : Select the configuration options for the `Shadcn UI` package in next step:
121+
122+
![Shadcn UI Setup](https://i.hizliresim.com/qm5909l.png)
123+
124+
> - **Note** : `components` and `utils` directories will be created in the `packages/ui/src` directory. We will change `utils` path in `packages/ui/src/*` files. Shadcn CLI generated like this `packages/ui/src/lib/utils` but we need to change it to `../../lib/utils`.
125+
126+
> Check the `tailwind.config.js` file in the `root` directory and it looks like this:
127+
128+
You can override the default Tailwind CSS configuration by updating the `tailwind.config.js` file in the root directory. All applications and libraries will use this configuration.
129+
130+
```js
131+
/** @type {import('tailwindcss').Config} */
132+
module.exports = {
133+
darkMode: ['class'],
134+
content: [
135+
'./apps/**/*.{js,ts,jsx,tsx}',
136+
'./packages/**/*.{js,ts,jsx,tsx}',
137+
'./{src,pages,components,app}/**/*.{ts,tsx,html}',
138+
],
139+
prefix: '',
140+
theme: {
141+
container: {
142+
center: true,
143+
padding: '2rem',
144+
screens: {
145+
'2xl': '1400px',
146+
},
147+
},
148+
extend: {
149+
colors: {
150+
border: 'hsl(var(--border))',
151+
input: 'hsl(var(--input))',
152+
ring: 'hsl(var(--ring))',
153+
background: 'hsl(var(--background))',
154+
foreground: 'hsl(var(--foreground))',
155+
primary: {
156+
DEFAULT: 'hsl(var(--primary))',
157+
foreground: 'hsl(var(--primary-foreground))',
158+
},
159+
secondary: {
160+
DEFAULT: 'hsl(var(--secondary))',
161+
foreground: 'hsl(var(--secondary-foreground))',
162+
},
163+
destructive: {
164+
DEFAULT: 'hsl(var(--destructive))',
165+
foreground: 'hsl(var(--destructive-foreground))',
166+
},
167+
muted: {
168+
DEFAULT: 'hsl(var(--muted))',
169+
foreground: 'hsl(var(--muted-foreground))',
170+
},
171+
accent: {
172+
DEFAULT: 'hsl(var(--accent))',
173+
foreground: 'hsl(var(--accent-foreground))',
174+
},
175+
popover: {
176+
DEFAULT: 'hsl(var(--popover))',
177+
foreground: 'hsl(var(--popover-foreground))',
178+
},
179+
card: {
180+
DEFAULT: 'hsl(var(--card))',
181+
foreground: 'hsl(var(--card-foreground))',
182+
},
183+
},
184+
borderRadius: {
185+
lg: 'var(--radius)',
186+
md: 'calc(var(--radius) - 2px)',
187+
sm: 'calc(var(--radius) - 4px)',
188+
},
189+
animation: {
190+
wiggle: 'wiggle 1s ease-in-out infinite',
191+
'accordion-down': 'accordion-down 0.2s ease-out',
192+
'accordion-up': 'accordion-up 0.2s ease-out',
193+
},
194+
keyframes: {
195+
wiggle: {
196+
'0%, 100%': { transform: 'rotate(-3deg)' },
197+
'50%': { transform: 'rotate(3deg)' },
198+
},
199+
'accordion-down': {
200+
from: { height: '0' },
201+
to: { height: 'var(--radix-accordion-content-height)' },
202+
},
203+
'accordion-up': {
204+
from: { height: 'var(--radix-accordion-content-height)' },
205+
to: { height: '0' },
206+
},
207+
},
208+
},
209+
},
210+
plugins: [require('@tailwindcss/forms'), require('tailwindcss-animate')],
211+
};
212+
```
213+
214+
### Add Button Component
215+
216+
After adding Shadcn UI to the project, you can use the `Button` component in the project.
217+
218+
```bash
219+
pnpm dlx shadcn-ui@latest add button
220+
```
221+
222+
> Tip: Fix the import paths in the `Button` component
223+
224+
> Use the `Button` component in the `container` and `info` applications with Shadcn UI
225+
226+
```tsx
227+
228+
import { Button } from '@mfe-tutorial/ui';
229+
230+
export function App() {
231+
return (
232+
// ...rest of the code
233+
<Button>Click Me</Button>
234+
<Button variant="destructive">Click Me</Button>
235+
<Button variant="secondary">Click Me</Button>
236+
// ...rest of the code
237+
);
238+
}
239+
```
240+
241+
### Add Shadcn UI Hover Card
242+
243+
After adding Shadcn UI to the project, you can use the `HoverCard` component in the project.
244+
245+
```bash
246+
pnpm dlx shadcn-ui@latest add hover-card
247+
```
248+
249+
> Tip: Fix the import paths in the `HoverCard` component
250+
251+
> Use the `HoverCard` component in the `container` and `info` applications with Shadcn UI
252+
253+
```tsx
254+
// apps/container/src/components/hover-card/index.tsx
255+
import {
256+
Button,
257+
HoverCard,
258+
HoverCardContent,
259+
HoverCardTrigger,
260+
} from '@mfe-tutorial/ui';
261+
import { CalendarDays } from 'lucide-react';
262+
263+
export function HoverCardDemo() {
264+
return (
265+
<HoverCard>
266+
<HoverCardTrigger asChild>
267+
<Button variant="link">@nextjs</Button>
268+
</HoverCardTrigger>
269+
<HoverCardContent className="w-80">
270+
<div className="flex justify-between space-x-4">
271+
<div className="space-y-1">
272+
<h4 className="text-sm font-semibold">@nextjs</h4>
273+
<p className="text-sm">
274+
The React Framework – created and maintained by @vercel.
275+
</p>
276+
<div className="flex items-center pt-2">
277+
<CalendarDays className="w-4 h-4 mr-2 opacity-70" />{' '}
278+
<span className="text-xs text-muted-foreground">
279+
Joined December 2021
280+
</span>
281+
</div>
282+
</div>
283+
</div>
284+
</HoverCardContent>
285+
</HoverCard>
286+
);
287+
}
288+
```
289+
290+
### Add Shadcn UI Badge
291+
292+
After adding Shadcn UI to the project, you can use the `Badge` component in the project.
293+
294+
```bash
295+
pnpm dlx shadcn-ui@latest add badge
296+
```
297+
298+
> Tip: Fix the import paths in the `Badge` component
299+
300+
> Use the `Badge` component in the `container` and `info` applications with Shadcn UI
301+
302+
```tsx
303+
// apps/container/src/components/social-links/index.tsx
304+
import { Badge } from '@mfe-tutorial/ui';
305+
import { BadgeAlert, BadgeCheck } from 'lucide-react';
306+
307+
export function App() {
308+
return (
309+
// ...rest of the code
310+
<Badge className="gap-x-2" variant="secondary">
311+
<BadgeCheck />
312+
Primary Badge
313+
</Badge>
314+
<Badge className="gap-x-2" variant="default">
315+
<BadgeCheck />
316+
Shadcn Badge
317+
</Badge>
318+
<Badge className="gap-x-2" variant="destructive">
319+
<BadgeAlert />
320+
Destructive Badge
321+
</Badge>
322+
// ...rest of the code
323+
);
324+
}
325+
```
326+
327+
> Check the All Shadcn UI Components [here](https://ui.shadcn.com/docs/components)
328+
329+
## Conclusion
330+
331+
In this tutorial, we learned how to set up a shared UI library for a Micro Frontend Application using Nx Workspace, React, and Tailwind CSS. We used Shadcn UI for the UI components and added the Button, HoverCard, and Badge components to the UI library. We also learned how to use these components in the applications.
332+
333+
By following the steps outlined in this tutorial, you should now have a solid foundation for creating a Micro Frontend Application with a shared UI library. This approach allows for better code reusability, maintainability, and consistency across multiple applications.
334+
335+
Feel free to explore the Shadcn UI documentation for more information on the available components and customization options. Happy coding!
336+
337+
---
338+
339+
Linkedin Post
340+
341+
---
342+
343+
# Excited to share my new article about "Shared UI Setup For Micro Frontend Application (Module Federation with React) with Nx Workspace" 🚀🔥
344+
345+
This tutorial will guide you through setting up a shared `UI library` for a `Micro Frontend Application (Module Federation with React)` using Nx Workspace, React, and Tailwind CSS. We will use `Shadcn UI` for the UI components.
346+
347+
👉 Key Takeaways:
348+
349+
🛠 Create UI Library: Use the `@nx/react:library` generator to create the UI library.
350+
🎨 Add Tailwind CSS Setup: Use the `@nx/react:setup-tailwind` generator to add the Tailwind CSS setup.
351+
🌟 Shadcn UI Setup: Install the `@shadcn/ui` package in the UI library and add Shadcn UI components.
352+
💫 Add Shadow UI Components: Add Button, HoverCard, and Badge components to the UI library.
353+
🔍 Customize UI Components: Use the Shadcn UI components in the applications and customize them as needed.
354+
355+
📚 Read the Full Article on Medium: https://medium.com/@serifcolakel/shared-ui-setup-for-micro-frontend-application-module-federation-with-react-with-nx-workspace-7bdffdc0161d
356+
📚 Read the Full Article on Dev.to: https://dev.to/serifcolakel/shared-ui-setup-for-micro-frontend-application-module-federation-with-react-with-nx-workspace-1p7c
357+
358+
🚀 [Live Demo](https://relaxed-mochi-7581fa.netlify.app/)
359+
🔗 [GitHub Repository](https://github.com/serifcolakel/mfe-tutorial)
360+
361+
🚀 In this comprehensive guide, I walk through the step-by-step process of integrating Shadcn UI, a beautifully designed component library, into your projects. Happy coding! 🎉
362+
363+
#MicroFrontend #NxWorkspace #React #TailwindCSS #ShadcnUI #UIComponents #WebDevelopment #DeveloperCommunity

0 commit comments

Comments
 (0)