Articles by tags

❤️‍🔥

implement dark mode & light mode in next.js 14 app router with material-ui without ui flickering

Kelvin Torver Peter

Nov 6, 2024, 1:13:20 PM

implement dark mode & light mode in next.js 14 app router with material-ui without ui flickering

In this in-depth guide, learn how to seamlessly set up dark mode and light mode in your Next.js 14 app router application using Material-UI and css v...

### Introduction Dark mode has become a popular feature in modern web applications, enhancing user experience and adding a sleek, visually appealing touch. With Next.js 14 and Material-UI (MUI), you can seamlessly toggle between dark and light modes, giving users the flexibility to choose based on their preferences. One of the challenges, however, is ensuring that the UI doesn’t flicker during theme transitions due to Nextjs server side rendering. In this article, we’ll implement a flicker-free dark mode and light mode in Next.js 14 using the new App Router, Material-UI, and MUI CSS variables to manage theme states smoothly. !!! abstract Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Try amazon shopping today!" target="_blank" href="https://amzn.to/3NXWjct"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Looking for the best platform to upgrade your wardrobe?</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Try amazon shopping today!</p></div></a></div> !!! ### Prerequisites Before we start, ensure you have: - **Node.js** and **npm** installed. - **Next.js 14** project setup. - **Material-UI (MUI)** for theme management. ### Follow the steps below to install the necessary packages Open your terminal and bootstrap a new nextjs project. 1. First, create a nextjs app ```bash npx create-next-app@14.2.16 nextjs-mui-theme ``` Open the project in your coding environment 2. Install the MUI dependencies: ```bash npm install @mui/material @emotion/react @emotion/styled next-themes ``` 3. Install MUI library for nextjs ```bash npm install @mui/material-nextjs/v15-appRouter ``` 4. Install Roboto fonts ```bash npm install @fontsource/roboto ``` 5. Copy & paste the code below in `src/app/layout.tsx` and ```ts react import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; ``` 6. Install MUI icons library ```bash npm install @mui/icons-material ``` 7. Copy the code below and replace the code in the file `src/app/globals.css` ```css @import url(https://fonts.googleapis.com/icon?family=Material+Icons); html, body { max-width: 100vw; overflow-x: hidden; } * { box-sizing: border-box; padding: 0; margin: 0; } ``` !!! info Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Shop Smarter on Amazon: Unbeatable Deals & Top Picks!" target="_blank" href="https://amzn.to/3UIrYT7"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Looking for the best deals and top-rated products? Discover incredible savings on Amazon! From tech gadgets to home essentials, we’ve got everything you need—delivered straight to your door.</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Shop Smarter on Amazon: Unbeatable Deals & Top Picks!</p></div></a></div> !!! 8. Install the package for generating dummy data ```bash npm i @faker-js/faker ``` If you did the above, your `package.json` should look like this ```json { "name": "nextjs-mui-theme", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/cache": "^11.13.1", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@faker-js/faker": "^9.2.0", "@fontsource/roboto": "^5.1.0", "@mui/icons-material": "^6.1.6", "@mui/material": "^6.1.6", "@mui/material-nextjs": "^6.1.6", "next": "14.2.16", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.16", "typescript": "^5" } } ``` 9. Create two directories in *src* directory - context - components 10. Open **context** driectory and create a file `AppThemeContext.tsx` and paste the following code. To handle theme switching, we’ll create a custom `ThemeProvider` component. This component will wrap our application, detect the theme preference (dark or light), and apply it without causing UI flickering. ```typescript react 'use client' import { createTheme, CssBaseline, responsiveFontSizes, ThemeProvider } from "@mui/material"; import { createContext, useContext, useMemo } from "react"; import type {} from '@mui/material/themeCssVarsAugmentation'; const AppThemeContext = createContext(null) const AppThemeProvider = (props: any) => { const theme = useMemo(() => { return responsiveFontSizes(createTheme({ cssVariables: { colorSchemeSelector: "class", disableCssColorScheme: true }, palette: { primary: { main: `rgb(10, 18, 42)`, contrastText: 'rgb(255, 255, 255)', }, secondary: { main: `rgb(27, 59, 111)`, contrastText: 'rgb(255, 255, 255)', } }, colorSchemes: { light: { palette: { primary: { main: `rgb(10, 18, 42)`, }, secondary: { main: `rgb(27, 59, 111)`, } } }, dark: { palette: { primary: { main: `rgb(10, 18, 42)`, }, secondary: { main: `rgb(27, 59, 111)`, } } } } })) }, []) return <AppThemeContext.Provider value={null}> <ThemeProvider theme={theme} disableTransitionOnChange> <CssBaseline enableColorScheme /> {props.children} </ThemeProvider> </AppThemeContext.Provider> } export const useAppThemeContext = () => useContext(AppThemeContext) export default AppThemeProvider ``` **Explanation** - We created a `theme` object to be used throughout our application - Code line 14 - 17, specifies the *cssVariables* config which enables css variables in MUI - We defined the *palette* for our app - We defined the *colorSchemes* which specifies our light and dark mode themes. This can be modified based on your needs. - **ThemeProvider:** This provider applies the selected MUI theme (either dark or light) to the entire app. You > Notice that we passed **theme** object to the ThemeProvider component - We called **CssBaseline** from *mui* with the prop *enableColorScheme* which will enable color schemes based on user selection or system default and reset the proper styles for our app to display well on different devices. - We exported our custom **AppThemeProvider** which will wrap the whole of our application. !!! success Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Checkout this amazing amazon offers!" target="_blank" href="https://amzn.to/4hvBpiJ"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Don’t miss out on exclusive offers, lightning-fast shipping, and the convenience of shopping from anywhere</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Checkout this amazing amazon offers!</p></div></a></div> !!! 11. Open `src/app/layout.tsx` file and replace the following code ```typescript react import type { Metadata } from "next"; import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter'; import "./globals.css"; import InitColorSchemeScript from "@mui/material/InitColorSchemeScript" import AppThemeProvider from "@/context/AppThemeContext"; import {MainNavbar} from "@/components" export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" suppressHydrationWarning> <body> <AppRouterCacheProvider options={{enableCssLayer: false}}> <AppThemeProvider> <InitColorSchemeScript attribute="class" /> <MainNavbar /> {children} </AppThemeProvider> </AppRouterCacheProvider> </body> </html> ); } ``` **Explanation** - We called **AppRouterCacheProvider** from mui nextjs library and wrap our children inside the *body* element. The component also accept an option of *enableCssLayer: false* - We imported our custom `AppThemeProvider` to wrap our whole app to apply our MUI styles. - We called `<InitiColorSchemeScript attribute="class" />` to initialize our default mode on the server without a flicker. Since *cssVariables* is enabled and initialized, this can be applied on the on server without a flicker. > Remember the `attribute="class"` must be the same value with the custom theme *cssVariables* config in `AppThemeContext.tsx` file `cssVariables: { colorSchemeSelector: "class" }` - Since we want our navbar to persist across pages, we called `<MainNavbar />` and then `{children}` which will be any component passed to the layout in this case the `page.tsx` component. 12. Open `src/components` directory and create 4 files namely; - `index.tsx` - `MainNavbar.tsx` - `Homepage.tsx` - `MediaCard.tsx` > Open `src/components/index.tsx` and paste the code below; ```typescript react export { default as MainNavbar } from "./MainNavbar" export { default as Homepage } from "./Homepage" ``` > Open `src/components/MainNavbar.tsx` and paste the code below; ```typescript react 'use client' import * as React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import Menu from '@mui/material/Menu'; import MenuIcon from '@mui/icons-material/Menu'; import Container from '@mui/material/Container'; import Avatar from '@mui/material/Avatar'; import Button from '@mui/material/Button'; import Tooltip from '@mui/material/Tooltip'; import MenuItem from '@mui/material/MenuItem'; import AdbIcon from '@mui/icons-material/Adb'; import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined'; import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined'; import { useColorScheme } from '@mui/material/styles'; const pages = ['Products', 'Pricing', 'Blog']; const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; function MainNavbar() { const { mode, systemMode, setMode } = useColorScheme(); const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null); const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null); const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => { setAnchorElNav(event.currentTarget); }; const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => { setAnchorElUser(event.currentTarget); }; const handleCloseNavMenu = () => { setAnchorElNav(null); }; const handleCloseUserMenu = () => { setAnchorElUser(null); }; const toggleDarkTheme = React.useCallback(() => { if(mode){ const currMode = mode === 'dark' ? 'light' : 'dark'; setMode(currMode); } },[mode, systemMode]) return ( <AppBar position="fixed"> <Container maxWidth="xl"> <Toolbar disableGutters> <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} /> <Typography variant="h6" noWrap component="a" href="#app-bar-with-responsive-menu" sx={{ mr: 2, display: { xs: 'none', md: 'flex' }, fontFamily: 'monospace', fontWeight: 700, letterSpacing: '.3rem', color: 'inherit', textDecoration: 'none', }} > LOGO </Typography> <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}> <IconButton size="large" aria-label="account of current user" aria-controls="menu-appbar" aria-haspopup="true" onClick={handleOpenNavMenu} color="inherit" > <MenuIcon /> </IconButton> <Menu id="menu-appbar" anchorEl={anchorElNav} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }} keepMounted transformOrigin={{ vertical: 'top', horizontal: 'left', }} open={Boolean(anchorElNav)} onClose={handleCloseNavMenu} sx={{ display: { xs: 'block', md: 'none' } }} > {pages.map((page) => ( <MenuItem key={page} onClick={handleCloseNavMenu}> <Typography sx={{ textAlign: 'center' }}>{page}</Typography> </MenuItem> ))} </Menu> </Box> <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} /> <Typography variant="h5" noWrap component="a" href="#app-bar-with-responsive-menu" sx={{ mr: 2, display: { xs: 'flex', md: 'none' }, flexGrow: 1, fontFamily: 'monospace', fontWeight: 700, letterSpacing: '.3rem', color: 'inherit', textDecoration: 'none', }} > LOGO </Typography> <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}> {pages.map((page) => ( <Button key={page} onClick={handleCloseNavMenu} sx={{ my: 2, color: 'white', display: 'block' }} > {page} </Button> ))} </Box> <Box sx={{ flexGrow: 0, pr: 2 }}> <Tooltip title="Toggle Theme"> <IconButton size='large' color='inherit' onClick={() => toggleDarkTheme()} sx={{ p: 0 }}> { mode === "dark" ? <DarkModeOutlinedIcon /> : <LightModeOutlinedIcon /> } </IconButton> </Tooltip> </Box> <Box sx={{ flexGrow: 0 }}> <Tooltip title="Open settings"> <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}> <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" /> </IconButton> </Tooltip> <Menu sx={{ mt: '45px' }} id="menu-appbar" anchorEl={anchorElUser} anchorOrigin={{ vertical: 'top', horizontal: 'right', }} keepMounted transformOrigin={{ vertical: 'top', horizontal: 'right', }} open={Boolean(anchorElUser)} onClose={handleCloseUserMenu} > {settings.map((setting) => ( <MenuItem key={setting} onClick={handleCloseUserMenu}> <Typography sx={{ textAlign: 'center' }}>{setting}</Typography> </MenuItem> ))} </Menu> </Box> </Toolbar> </Container> </AppBar> ); } export default MainNavbar; ``` **Explanation** - To implement theme toggle, we import `useColorScheme` on line 18 from *@mui/material/styles* - We called it on line 25 to get the `mode` and `systemMode` - We created a function **toggleDarkTheme** on line 44 to 49 to check if mode is set theme toggle the opposite then we called it on line 142 > Open `src/components/Homepage.tsx` and paste the code below; ```typescript react 'use client' import React from 'react' import { faker } from '@faker-js/faker'; import { Box, Container, Grid2 } from '@mui/material'; import MediaCard from './MediaCard'; const Homepage = () => { const data = Array.from({ length: 24 }).map(() => ({ id: faker.string.uuid(), title: faker.lorem.lines(1), content: faker.lorem.sentences(4), src: faker.image.urlPicsumPhotos() })) return ( <Box sx={[(theme) => ({ backgroundColor: theme.vars.palette.grey[300], ...theme.applyStyles("dark", { backgroundColor: theme.vars.palette.grey[900] }) })]} > <Container maxWidth="xl" sx={{mt: 9, pt: 2}}> <Grid2 container spacing={2}> {data.map(item => ( <Grid2 key={item.id} size={{lg: 3, md: 4, sm: 12, xs: 12}}> <MediaCard item={item} /> </Grid2> ))} </Grid2> </Container> </Box> ) } export default Homepage ``` !!! abstract Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Try this recommended laptops for coding on amazon" target="_blank" href="https://amzn.to/3UEiHLT"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Looking for the best laptops for coding?</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Try this recommended laptops for coding on amazon!</p></div></a></div> !!! > Open `src/components/MediaCard.tsx` and paste the code below; ```typescript react import * as React from 'react'; import Card from '@mui/material/Card'; import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; type Item = { id: string, title: string, src: string, content: string} export default function MediaCard({item}: { item: Item}) { return ( <Card sx={{ height: "100%"}}> <CardMedia sx={{ height: 140 }} image={item.src} title={item.title} /> <CardContent> <Typography gutterBottom variant="h5" component="div"> {item.title} </Typography> <Typography variant="body2" sx={{ color: 'text.secondary' }}> {item.content} </Typography> </CardContent> <CardActions sx={{justifyContent: "space-between"}}> <Button color='inherit' variant='outlined' size="small">Share</Button> <Button color='inherit' variant='outlined' size="small">Learn More</Button> </CardActions> </Card> ); } ``` 13. Open `src/app/page.tsx` file and paste the following code ```typescript react import { Homepage } from "@/components"; export default function Home() { return ( <Homepage />); } ``` 14. Open your terminal within vs code or your chosen environment and run the command the blow to start the nextjs project. ```bash npm run dev ``` The above command should start a nextjs server listening on port 3000 like; `http://localhost:3000` Go ahead and open it in the browser and navigate to the above url and you should see your project running! With the above implementation you should be able to toggle between light and dark mode without UI flickering. !!! tip Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Unlock Huge Savings with Amazon’s Best Coupons! Shop & Save Big!" target="_blank" href="https://amzn.to/4fcO3Sb"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Why pay full price when you can save more? Find the latest high-value Amazon coupons and discounts on your favorite products! From electronics to fashion, enjoy exclusive savings and special offers that help you get more for less. Don’t miss out—shop today and take advantage of Amazon’s unbeatable deals! 💸🎉</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Unlock Huge Savings with Amazon’s Best Coupons! Shop & Save Big!</p></div></a></div> !!! ### Minimize Flickering Using `ThemeProvider`’s `defaultMode="system"` and `InitColorSchemeScript`'s `defaultMode="system"` ensures that the app initially matches the user’s system theme on load. This approach minimizes the risk of a flicker effect and provides a smoother experience. If the above are not provided, the system's default mode will picked by default. ### Conclusion You’ve successfully implemented dark mode and light mode in your Next.js 14 app using MUI without flickering. Here are some additional tips for enhancing your implementation: - **System Theme Detection:** Mui ThemeProvider’ `defaultTheme="system"` applies the system’s theme by default, ensuring that users start with their preferred theme. - **Server-Side Rendering:** If using SSR, this implementation handles theme detection automatically to avoid flickering. - **Customization:** You can further customize `light` and `dark` in `AppThemeContext.tsx` for brand-specific colors, fonts, and more! By following these steps, you can provide a smooth, flicker-free dark mode experience in your Next.js app, enhancing both usability and visual appeal. !!! danger Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Try Monetag today and start monetizing your content instantly!" target="_blank" href="https://monetag.com/?ref_id=uawc"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Looking for the best platform to monetize your content?</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Try Monetag today and start monetizing your content instantly!</p></div></a></div> !!! ### Source code For the full implementation, you can find the source code here [Nextjs Mui Theme Code](https://github.com/codesermon/nextjs-mui-theme) ### Youtube Video _Please like, comment, subscribe and turn notifications for more awesome videos like this_ <iframe width="560" height="315" src="https://www.youtube.com/embed/5ENPhdEMewg?si=YBFgzyxXO2vvWl5N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> ### References [Read more on CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)

#nextjs #material-ui #reactjs #mui

👍

love

❤️

wow

😮

fire

❤️‍🔥

build & deploy a real-time sports voting app with next.js, node.js, & sse on vercel & google cloud app engine

Kelvin Torver Peter

Nov 12, 2024, 7:32:48 AM

build & deploy a real-time sports voting app with next.js, node.js, & sse on vercel & google cloud app engine

In this comprehensive tutorial, you'll learn how to build and deploy a real-time sports voting app using Next.js, Node.js, TypeScript, and Server-Sent...

I already talked about realtime data streaming using server sent events and how it differs from websockets in this article [Realtime data streaming](https://codesermon.com/articles/realtime-data-streaming-using-server-sent-eventssse-with-reactjs-and-nodejs-yplk) and in this guide, I'm going to expatiate more on that and demonstrate how to build a realtime sport leaderboard application using server sent events, nextjs app router and nodejs. !!! abstract Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Check this out on amazon!" target="_blank" href="https://amzn.to/3Z1xjY7"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Looking for the best programming chair?</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Check this out on amazon!</p></div></a></div> !!! In this comprehensive tutorial, you’ll learn how to build and deploy a **real-time sports voting app** using **Next.js**, **Node.js**, **TypeScript**, and **Server-Sent Events (SSE)**. This app allows users to vote on sports events in real time, with live updates streamed seamlessly from the **Node.js backend** to the **Next.js frontend**. We'll guide you through each step, from setting up the development environment to deploying the app on **Vercel** and **Google Cloud App Engine**. !!! info Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Top-Rated Devices on Amazon - Upgrade Your Tech Today!" target="_blank" href="https://amzn.to/4flnEBH"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Discover the best devices for every need! From cutting-edge gadgets to essential tools, find Amazon's top-rated devices to boost your productivity, enhance entertainment, and simplify daily tasks. Shop now for great deals and quick delivery!</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Top-Rated Devices on Amazon - Upgrade Your Tech Today!</p></div></a></div> !!! **What you'll learn in this tutorial:** - **Setting up a Next.js app** using **TypeScript** and the **Next.js App Router** for efficient routing and modern app structure. - **Building a Node.js backend** that serves voting data, handles business logic, and streams real-time updates to the frontend. - How to **establish a connection between Node.js and the client using SSE (Server-Sent Events)**, enabling real-time communication without WebSockets. - Learn how to **create a single SSE context in ReactJS**, so you can manage and consume streaming data across the entire app efficiently using **React Context API**. - How to **configure CORS (Cross-Origin Resource Sharing)** on the Node.js server to allow only trusted origins to connect, ensuring security while enabling real-time updates. - **Deploying your app on Vercel** (for frontend) and **Google Cloud App Engine** (for the Node.js backend), making your app scalable, secure, and production-ready. By the end of this tutorial, you’ll have a **fully functional, real-time voting app** that streams live events from the server to the client, all hosted on **Vercel** and **Google Cloud**, ready for production. **Key concepts covered in this video:** - **SSE (Server-Sent Events)** for real-time data streaming. - **React Context** to manage real-time events globally across the app. - **CORS Configuration** to secure the server connection to trusted domains. - **Deploying with Vercel and Google Cloud** for robust, scalable hosting. !!! success Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><a title="Shop Amazon’s Most Popular Products – Best Deals, Top Picks!" target="_blank" href="https://amzn.to/40KylsS"><div class="MuiBox-root css-0"><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh">Checkout Amazon's hottest products, from trending gadgets to must-have home essentials. Enjoy unbeatable prices, trusted quality, and fast delivery on bestsellers everyone loves. Get yours before they’re gone!</p><p class="MuiTypography-root MuiTypography-body2 css-bxmwoh" style="font-weight:400">Shop Amazon’s Most Popular Products – Best Deals, Top Picks!</p></div></a></div> !!! ### Sport Leaderboard Demo App Visit [Sport Voting App Demo](https://sse-sport-client-six.vercel.app/) to view the app in real time ### Video Tutorial 🔔 **Make sure to hit the like button and subscribe** to stay updated with more web development tutorials, real-time apps, and cloud deployment tips! <iframe width="560" height="315" src="https://www.youtube.com/embed/AwvECP53BtQ?si=ZBDBqazZHdyvHEbJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> --- ## Conclusion You have successfully deployed a TypeScript Node.js application with PostgreSQL and Prisma on GCP App Engine Flexible Environment. Additionally, you have implemented and configured Server-Sent Events (SSE) to push real-time updates from the server to the client. Happy coding!!! ### Project Source Code Get the client code here 👉 [SSE sport client app code](https://github.com/codesermon/sse-sport-client) Get the server code here 👉 [SSE sport server app code](https://github.com/codesermon/sse-sport-server) ### References Read more on [ts-express-sse](https://www.npmjs.com/package/ts-express-sse) library

#nextjs #server sent events #nodejs #reactjs

👍

love

❤️

wow

😮

fire

❤️‍🔥

understanding cross origin resource sharing (cors) in reactjs & nodejs

Code Sermon

Oct 30, 2024, 4:32:30 PM

understanding cross origin resource sharing (cors) in reactjs & nodejs

CORS (Cross-Origin Resource Sharing) is a security mechanism that allows client applications to requ...

## What is CORS? **Cross-origin resource sharing (CORS)** is a mechanism that allows a client application to request restricted resources hosted on server from a different origin. These resources may include; web fonts, videos, scripts, iframes, images and stylesheets. By default, client applications making AJAX requests are only allowed to request resources that live on the same origin as the location where the client application is running. CORS defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request. If an application running on different domain tries to make a XMLHttpRequest to a different domain, it will be blocked by same-origin policy. It extends the same-origin policy and offers freedom and functionality than simply same-origin requests and it is more secured. Poor configuration & implementation of CORS policy could lead to data access denial, data theft and potential cross-domain attacks. !!! abstract Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><p class="MuiTypography-root MuiTypography-body1 css-fyswvn">Upgrade your tech game on Amazon! Find the latest computers, tablets, and accessories at unbeatable prices, with fast shipping and top-rated brands. Get your perfect device today!</p><a title="Amazon Movers & Shakers in Computers & Accessories" target="_blank" href="https://amzn.to/4f3U6Im">Amazon Movers & Shakers in Computers & Accessories</a></div> !!! ## Why is CORS important? Most of the time, you client application only needs to access resources within the same origin but there are scenarios where your application needs to request resources residing on another domain and that’s where CORS comes in. This could include your client application (React js website) makes calls to different API backend running on different domains to access resources such as images, web fonts, videos, files e.t.c Any origin that differs from the location your client app is running on such as different scheme, domain or port needs CORS configuration in order to properly interact. This could also serve as a big security measure if your CORS is properly configured. Different CORS request types There are two types CORS requests which include; 1. Simple requests with HTTP methods as GET, POST or HEAD 2. Preflight requests with HTTP methods DELETE, PATCH, PUT e.t.c If any of the preflight HTTP methods is used to make an **XMLHttpRequest**, the browser makes an automatic preflight request using the OPTIONS method. This call is used to determine if the CORS policy on the server supports the preflight request and whether or not the server can handle such request. In this article, we are going to focus majorly on how to add CORS to a react js application and Node.js Express RESTful API. !!! caution Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><p class="MuiTypography-root MuiTypography-body1 css-fyswvn">Monetag is your number platform to monetize your content hassle free. You don't need to be tech expert to do it.</p><a title="Looking for the best platform to monetize your content?" target="_blank" href="https://monetag.com/?ref_id=uawc">Try Monetag Today!</a></div> !!! ## Using CORS in react.js app and Node.js express REST API In this article we are going to discuss the following; 1. How to configure CORS to allow all domains to send requests to your node js server api 2. How to configure CORS to allow a single domain to communicate with your node js server. 3. How to configure CORS to allow multiple domains whitelisted by you to connect to your node js server. 4. How to configure CORS with express js to allow client server communication 5. How to proxy request in react js application to a node js server. 6. How to fix CORS error Blocked by CORS policy ## How to fix CORS error Blocked by CORS policy If you are react js developer, you may have come across CORS error, request to a particular URI is blocked by CORS policy. This is sometimes weird at first and if you aren’t familiar with CORS, you start second guessing if your code is buggy. No, your code isn’t buggy but it is the way browsers behave by default when you’re trying to request resources to another domain. In this article, we’re going to assume your client app is hosted on http://localhost:3000 and your server (REST API) is hosted on http://localhost:5000 Anyways, there are two ways to fix this in a react.js application which include; ## 1. Proxy configuration in package.json Using proxy configuration within your react.js app **package.json** file. One thing with this solution is that it only works in development environment unless you have a way of making it to work in production. In order to temporary fix the error, open your react js app **package.json** file and add the following configuration. ```javascript //other config keys { "proxy": "http://localhost:5000" } ``` If you noticed, the above configuration points to our server URL and this will allow you to make XMLHttpRequest in your client app running on the above URL. ## 2. Using CORS configuration In order to make use of CORS, I will assume you’re making use axios library in your client-side application. Remember this is not library specific, so you can make use of native browser FETCH API. Supposing you create an instance of axios using the code below ```javascript import axios from “axios” export const Axios = axios.create({ baseURL: "http://localhost:5000" withCredentials: true }) ``` The **baseURL** in the configuration above points to the URL of your node.js express API and the **withCredentials** property specifies if we want to share cookies or authentication headers with our server. The **withCredentials** property is totally optional and you don’t necessarily need to specify it unless you want to share cookies and auth headers. !!! abstract Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><p class="MuiTypography-root MuiTypography-body1 css-fyswvn">Discover endless deals on Amazon! From fashion and tech to home essentials and more, find everything you need in one place, with fast delivery and top-notch service. Start shopping today!</p><a title="Shop Amazon Today!" target="_blank" href="https://amzn.to/40tbSjV">Shop Amazon Today!</a></div> !!! **How to add CORS in node.js express API** In order to add CORS to our API, there are different ways by which you can accomplish this. It could be by manually writing an express middleware and telling your server which requests to allow and from which origin or by using CORS npm library which has done much of the heavy lifting for us. In this article, we will be using cors npm library which can be easily passed as an express middleware. First of all, install calls on your server-side app by running the command ```bash npm install cors ``` Then you can add it as a middleware like this ```javascript const express = require("express"); const cors = require("cors"); const app = express(); //use cors as middleware app.use(cors()) ``` The above code is the default way of adding CORS as an express middleware but what if you want to specify the origin of your client app? Well let’s learn different ways to configure CORS in node js app. #### Allow requests from all domains. To allow our node.js server to handle all requests from all domains in our application, we will have to configure cors and pass it an origin key with a wildcard value shown below. ```javascript //other imports app.use( cors({ origin: "*", }) ); ``` The issue with the above configuration is that, you client-side application **CANNOT** share cookies nor authentication headers even if the credentials key is passed with a value of true as shown below. **Note:** The origin key in cors option CORS take different option types such string, boolean, function or an array. ```javascript //other imports app.use( cors({ origin: "*", credentials: true }) ) ``` Another key important thing to note is that, whenever you are not passing **`withCredentials: true`** in your client request API, DO NOT pass **`credentials: true`** in your cors config server-side most especially if you are using wildcard (*) as the origin of your request header. #### Tell CORS to set the origin to the request origin In order to configure CORS to set the origin to the request origin, simply pass a boolean true value to origin key as shown below; ```javascript //other imports app.use( cors({ origin: true, credentials: true }) ) ``` Although this will allow your client app to share cookies and auth headers with your server unlike using wildcard but this also is not well secure enough unless it’s an open API. #### Configure CORS to set the origin to a single domain In order to configure cors to set the origin to a single domain, simply pass a string true value to origin key as shown below; ```javascript //other imports app.use( cors({ origin: "http://localhost:3000", credentials: true }) ) ``` The above configuration will allow your client app to accept requests only from http://localhost:3000 and share cookies and auth headers with your server. This configuration is tightly secure but not robust enough. #### Configure CORS to set the origin to multiple whitelisted domains What if you have microservice applications hosted on different domains or you want different domains to make requests to your API? Well, you can simply configure cors passing by an array of allowed domains to the origin key as shown below; ```javascript //other imports const allowedDomains = ["http://localhost:3000", "http://localhost:4000", "http://localhost:6000"] app.use( cors({ origin: allowedDomains, credentials: true }) ) ``` The above configuration will allow your client app to accept requests from any of the above domains listed in the array and share cookies and auth headers with your server. CORS middleware can be passed as a global middleware and on a single route but all the methods shown above are ways to globally configure your CORS within your app. Lets briefly see how we can pass CORS middleware on a single route. Note that, all the ways described above can be use on your routes as well. ```javascript const allowedDomains = ["http://localhost:3000", "http://localhost:4000", "http://localhost:6000"] app.get("/api/posts", cors({ origin: allowedDomains, credentials: true }), (req, res) =>{ res.send("everything still works") }) ``` !!! attention Note Whenever you’re a making a client-side request with the option of **`withCredentials: true,`** ensure your CORS configuration is passed **`credentials: true`** as an option as well else cookies won’t be shared. Another key important; thing to note is that, whenever you’re using wildcard (*) as the origin, DO NOT use **`withCredentials: true`** on the client and **`credentials: true`** on server !!! ## Summary: In this article, you have learnt that CORS is a mechanism that allows requests from a particular domain to be accepted by another domain and possibly share resources with each other. You got to understand that different ways by which you can configure your CORS to allow effective communication between client apps and servers. CORS, if done properly can serve as one of the security measures ensuring that your server only accepts requests from known domains. !!! success Sponsored <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-x82yov" style="--Paper-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"><p class="MuiTypography-root MuiTypography-body1 css-fyswvn">Monetag brings you exclusive product offers you don’t want to miss!</p><a title="Check out these amazing deals!" target="_blank" href="https://chikraighotoops.com/4/8313667">Check out these amazing deals!</a></div> !!! ## Video Tutorial If you are the visual type like me, go ahead and watch the video below. Please don't forget to like, share, comment, subscribe and turn on notification as that will give me the motivation to do more awesome videos and tutorials like this. <iframe width="560" height="315" src="https://www.youtube.com/embed/QZTOhHZY_LM?si=Q2K12x6j76ryFcZL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> **REFERENCES** If you want to read more about CORS, visit the following links [What is cors? ](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing ) [A guide to Cors](https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/) [CORS](https://portswigger.net/web-security/cors) [What is CORS?](https://www.stackhawk.com/blog/what-is-cors/ )

#cors #nodejs #reactjs #express

👍

love

❤️

wow

😮

fire

❤️‍🔥

View Articles