DEV Community: Adebayo Ilerioluwa

Building a universal React app with Expo, Next.js & Nativewind

Adebayo Ilerioluwa — Tue, 02 Jul 2024 10:34:56 +0000

Introduction

Building universal React applications has never been easier or more efficient, thanks to Expo. Expo is a powerful toolchain that simplifies the development process, allowing developers to create high-quality, performant apps for iOS, Android, and the web with a single codebase.

With this guide, we will set up a monorepo from scratch to build a Universal React app using Expo and Next.js using tools like NativeWind/Tailwind, Turborepo for building apps across both mobile and web platforms.

Problem

At my job, I was assigned the task of building a design system for both our mobile and web products. Given my background as a React developer, React Native was the natural choice for mobile development.

The challenge was to create a shared component library with consistent styling that works seamlessly across both mobile and web applications using React and React Native.

The goal was to develop a solution that supports the development of both mobile and web applications without duplicating components, rewriting business logic, or maintaining separate codebases.

Before we get started, let's familiarise ourselves with some key terminologies.

Universal in this case means it works on all platforms i.e Andriod, IOS, Web and others.

Expo

Expo is a framework that makes developing Android and iOS apps easier

Next.js

Next.js is a React framework for building full-stack web applications.

React Native for Web

Makes it possible to run React Native components and APIs on the web using React DOM.

Prerequisites

Node.js (>=18)
Yarn (v1.22.19)
Native Development Environment (Xcode, Android Studio e.t.c)

Setup yarn workspaces

We need to initialise our project with a package.json file

yarn init

Using Classic yarn as Expo documentation recommends it.

We currently have first-class support for Yarn 1 (Classic) workspaces. If you want to use another tool, make sure you know how to configure it.

yarn set version 1.22.19

Set private flag as true

+ "private": true

Note that the private: true is required, Workspaces are not meant to be published.

Create sub folders apps and packages

  "workspaces": [
    "apps/*",
    "packages/*"
  ],

packages/* simply means we'll reference all packages from a single directive

apps contains

web
native

packages contains

ui
utils e.t.c

Install Turborepo

turbo is built on top of Workspaces, a feature of package managers in the JavaScript ecosystem that allows you to group multiple packages in one repository.

yarn add turbo --dev

Add turbo.json file

{
    "$schema": "https://turbo.build/schema.json",
    "tasks": {
      "build": {
        "outputs": ["dist/**", ".next/**", "!.next/cache/**"],
        "dependsOn": ["^build"]
      },
      "dev": {
        "cache": false,
        "persistent": true
      },
      "lint": {},
      "clean": {
        "cache": false
      }
    }
  }

Update .gitignore file

+ .turbo

Setup Default Typescript config in the root workspace

{
    "compilerOptions": {
      "strictNullChecks": true,
      "noUncheckedIndexedAccess": true,
      "baseUrl": "./packages",
      "paths": {
        "ui/*": ["./packages/ui/*"]
      },
      "jsx": "react-jsx"
    },
    "extends": "expo/tsconfig.base"
  }

Setting up Packages

Create new shared packages for the monorepo in packages folder containing

ui
app

cd into packages/ui

run

yarn init -y

Next, create an empty index.ts in packages/ui file for now

Structure of Monorepo

universal-app-starter
└── apps
    ├── native 
    └── web
└── packages
    ├── ui 
    └── app

Setup default `apps` for native and web with Expo & Next.js

Navigate to the apps directory

cd apps

Setting up Nextjs app

Run

npx create-next-app@latest

Update tsconfig.json to include

  "extends": "../../tsconfig.json",

cd apps/web

yarn run dev

Using Expo

npx create-expo-app@latest

You'll be prompted to enter your app name. Set your app name as native and run the command to reset it as fresh project

yarn run reset-project

Optionally, you could delete the boilerplate files and folders generated from create-expo-app

/app-example.
components
hooks
constants
scripts

replace tsconfig.json in the native folder

{
  "extends": "../../tsconfig.json",
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}

Ensure you have expo-env.d.ts file

/// <reference types="expo/types" />

// NOTE: This file should not be edited and should be in your git ignore

To run your project, navigate to the directory and run one of the following commands.

cd native

- yarn run android
- yarn run ios
- yarn run web

Setting Up React Native Web in Next.js app

In the root directory, add resolutions to package.json file

  "resolutions": {
    "react": "18.2.0",
    "react-native": "0.74.2",
    "react-native-web": "~0.19.10",
    "tailwindcss": "^3.4.1"
  }

In apps/web
Run

yarn add react-native-web @expo/next-adapter

Updating Next.js Configuration

Edit next.config.js

/** @type {import('next').NextConfig} */

const { withExpo } = require("@expo/next-adapter");

module.exports = withExpo({
  reactStrictMode: true, 
  transpilePackages: [
    // NOTE: you need to list `react-native` because `react-native-web` is aliased to `react-native`.
    "react-native",
    "react-native-web",
    "ui"
    // Add other packages that need transpiling
  ],
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      "react-native$": "react-native-web",
      "react-native/Libraries/Image/AssetRegistry":
        "react-native-web/dist/cjs/modules/AssetRegistry" // Fix for loading images in web builds with Expo-Image
    };
    config.resolve.extensions = [
      ".web.js",
      ".web.jsx",
      ".web.ts",
      ".web.tsx",
      ...config.resolve.extensions
    ];
    return config;
  }
});

Resetting React Native Web styles

The package react-native-web builds on the assumption of reset CSS styles, here's how you reset styles in Next.js

Add to globals.css

  html, body, #__next {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    margin: 0px;
    padding: 0px;
    min-height: 100%;
}

#__next {
    flex-shrink: 0;
    flex-basis: auto;
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    flex: 1;
}

html {
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    display: flex;
    overflow-y: auto;
    overscroll-behavior-y: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-overflow-style: scrollbar;
}

Creating first shared component

Now we have RNW(React Native Web), Let's write our first shared component.

Create a file view/index.tsx and in the ui package

import { View as ReactNativeView } from 'react-native'

export const View = ReactNativeView;

Update the packages/ui/index.ts

Add

export {};

Using ui package

Add ui package in both native and web dependencies in package.json file

....
"ui" : "*",
....

Replace apps/native/index.tsx in Expo app

import { Text } from "react-native";
import { View } from "ui/view";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

Replace apps/web/index.tsx in Next.js app

"use client";

import { View } from "ui/view";

export default function Home() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <p>
        Get started by editing&nbsp;
        <code className="font-mono font-bold">app/page.tsx</code>
      </p>
    </View>
  );
}

Configuring Metro bundler

To configure a monorepo with Metro manually, there are two main changes:

Wee need to make sure Metro is watching all relevant code within the monorepo, not just apps/native.

cd apps/native

npx expo customize metro.config.js

Update metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const path = require("path");

const workspaceRoot = path.resolve(__dirname, "../..");
const projectRoot = __dirname;

const config = getDefaultConfig(projectRoot);

config.watchFolders = [workspaceRoot];
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, "node_modules"),
  path.resolve(workspaceRoot, "node_modules")
];

config.resolver.disableHierarchicalLookup = true;

module.exports = config;

Update default entry point for Expo app

Update main field in package.json in apps/native

- "main": "expo-router/entry",
+ "main": "index.js",

import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context("./app");
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

Now, we have a working native and web app using shared component with RNW

Results

Universal Styling with NativeWind

Next, we want to further and style both platform using Tailwind in Next.js and on mobile, NativeWind is the right tool to achieve.

NativeWind allows you to use Tailwind CSS to style your components in React Native. Styled components can be shared between all React Native platforms.

cd apps/native

npx expo install nativewind@^4.0.1 react-native-reanimated tailwindcss

Run pod-install to install Reanimated pod:

npx pod-install

Run npx tailwindcss init to create a tailwind.config.js file

npx tailwindcss init

Add the paths to all of your component files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
+   "./index.js",
+   "./app/**/*.{js,jsx,ts,tsx}",
+   "../../packages/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a CSS file global.css and add the Tailwind directives

cd apps/native
touch global.css

Copy & paste in `global.css` file

@tailwind base;
@tailwind components;
@tailwind utilities;

Add babel preset

Configure babel to support NativeWind

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Modify Metro Config

+const { withNativeWind } = require('nativewind/metro');
...
-module.exports = config;
+module.exports = withNativeWind(config, { input: './global.css' })

Import your CSS file

In the app/layout.tsx file

import "../global.css";
....

Typescript Support

NativeWind extends the React Native types via declaration merging. Add triple slash directive referencing the types. Add a file app-env.d.ts in apps/native root directory.

/// <reference types="nativewind/types" />

Next.js Support

Update tailwind.config.js in apps/web

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
+  important: "html",
+  presets: [require('nativewind/preset')],
  theme: {
    extend: {

    },
  },
  plugins: [],
};
export default config;

Update tsconfig.json file

{
  "compilerOptions": {
    "jsxImportSource": "nativewind"
  }
}

Using Nativewind in shared UI

In packages/ui

Update the view component we created earlier

import { View as ReactNativeView } from 'react-native'
+ import { cssInterop } from 'nativewind';

+ export const View = cssInterop(ReactNativeView, {
+    className: 'style',
+ });

Finally add nativewind to list of packages to transpile

  transpilePackages: [
  ...,
+ "nativewind"
+ "react-native-css-interop"
 ]

Update the use of the ui/view component in both web and mobile app

import { Text } from "react-native";
import { View } from "ui/view";

export default function Index() {
  return (
    <View
+      className="flex-1 justify-center items-center"'
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}>
...

Now, Using className works just same as with web.

VSCode Intellisense Support

Create a new file tailwind.config.ts in the project root directory and paste the following in the file.

// Add file for tailwind intellisense. Leave this empty 
module.exports = {};

Troubleshooting

if you're using typescript, confirm you have the reference to NativeWind types in app-env.d.ts

/// <reference types="nativewind/types" />

Happy to help with any issues, be sure to leave a comment if you need help or found this useful.

Links

Turborepo Monorepo Guide
Expo Documentation
NativeWind Setup Expo Router

Closing

Next, you'll need to build your own or custom universal components. I'll recommend React Native Reusables to get started with most basic components.

If you're interested in using an existing template, I've followed the steps from this guide to create a starter template on Github.

adebayoileri / universal-app-starter

Expo + Next.js (with React Native Web) template styled using TailwindCSS & NativeWind, featuring a shared component library for developing universal React applications.

Universal App Starter

Get Started

Must have Node and Yarn(v1.22.19) installed to setup locally

yarn

Development

yarn run dev

Build

yarn run build

Folder Structure

This monorepo consists of the two workspaces apps & packages

universal-app-starter
└── apps
    ├── native 
    └── web
└── packages
    ├── ui 
    └── app

Apps and Packages

apps/native: a react-native app built with expo
apps/web: a Next.js app built with react-native-web
packages/ui: a shared package that contains shared UI components between web and native applications
packages/app: a shared package that contains shared logic between web and native applications

Technologies

Expo for native development
Next.js for web development
React Native for native development
React Native Web for web development
NativeWind styling solution for native
TypeScript for static type checking
Prettier for code formatting
Turborepo build system for managing monorepo

Misc

Interested in setting up a similar project from scratch? Check out the article…

View on GitHub

Universal App Starter

RSC: Back to the Server

Adebayo Ilerioluwa — Fri, 31 May 2024 20:27:44 +0000

if you're like me and you've been keeping up-to-date in the React community over the past few months you've probably heard the acronym being talked about a lot. You might have played around with it in a framework (Next.js/Remix) or have a good understanding but are not sure of the applications, or you're curious about learning what it's all about.

In this article my aim is to share the ideas, motivations, and drawbacks, understand how it works and hopefully build a mental model for thinking about React Server Components.

If you're a React developer, you've probably worked with frameworks such as Next.js, Gatsby, etc. And commonly seen the acronym SSR (Server-Side Rendering) which is not to be mistaken for RSC. They have their similarities, but they are totally different. I'll explain using the famous lego pieces analogy.

Alright, let's say you have a box with all your Lego pieces, Eventually, you'll want to play with your Legos and will have to open the box, bring them all out and set up the pieces before you can start playing. This is how a default React app works. There’s an initial load time before it’s ready for use.

Now, with RSC your box has a special tool that puts together some of these pieces and they are ready for you to play. Instead of setting up your pieces from scratch (client), you have a tool (server) that sets up the pieces into ready-to-use parts and all you have to do is put them in their final positions.

One could argue that traditional SSR was present in early websites with a server-side language like PHP that could send entire web pages from the server on demand, and provides benefits such as SEO, less client-side loading, which improved initial load time, etc. However, one of the drawbacks with SSR is that after hydration subsequent interactions with the app require making extra calls for dynamic components.

Next, I'll share the motivation behind this new paradigm and the features and pain points RSC addresses.

Motivation

The React team first announced the RFC for RSC (React Server Components) in December 2020, and by 2023, they announced the canary version for RSC.

Performance & Speed. Server components provides good performance "out the box"😉 which is one of the main pain points of a regular React app. It does this in different ways;

It allows for the use of third-party packages on the server which could significantly reduce the bundle size of the app. For example, most commonly used packages such as date libraries(date-fns), utility library(lodash) etc could simply be eliminated if they're only needed in a specific RS Component.

// Before Server Components

import lodash from "lodash"; // 71.5 (25.3k gzipped)

function TableComponent({text}) {
  // using some lodash functions
  return (/* render */);
}

// With Server Components but zero bundle size

import lodash from "lodash"; // zero bundle size

function TableComponent({text}) {
  // using some lodash functions
  return (/* render */);
}

This is hugely beneficial for users and serves as a much better DX for developers.

Shared Server-Client Context. This could be the most impactful and useful application of RSC. When developing apps with React, you'll most likely have the need to interface with endpoints sending or receiving data to your app.
Early React has been client-focused, which led to the need to bring React to the server. Developers often use different languages when writing code for both the client and server commonly PHP/Python and JS. The backend code is mostly responsible for accessing filesystems, database and external data sources.

However, RSC clearly redefines this approach by eliminating the need for the API calls and the request-response cycle. The boundary between the client and server has been streamlined by giving React fully access to the backend, the default mode allows for database calls, filesystem access, and passing props directly to components. Here's how an example server component accessing the filesystem would look:

File System

import fs from 'fs';

async function Post({slug}) {
  const post = JSON.parse(await fs.readFile(`${slug}.md`));
  return <PostComponent post={post} />;
}

Database Calls

import db from 'db';

async function Post({slug}) {
  const post = await db.findOne(slug);
  return <PostComponent post={post} />;
}

With server components, the security benefits of avoiding sending secret keys such as user tokens and API keys would also be hugely impactful as the client can access other necessary data without exposing crucial ones to the client.

Developer Experience. Think about how advantageous this could be in a typical production app where we have typed props defined in our client components and accept data from a server component. This approach allows for better developer experience and fully typed experience across client and server.

Firstly, simply opt-in the component as a client component using the use client directive.

"use client"
// client component: client-component.tsx

export default function Author({
  authorName
}: {
 authorName: string;
}) {
  return (
    <div className="text-xl font-bold">
      {authorName}
    </div>
  );
}

// server component: server-component.tsx
import db from 'db';

async function Post({id}) {
  const author = await db.findOne(id);
  return (
     <Author 
      authorName={author.name}  // would likely display an error when it's doesn't match type "string" specified in the client component
     />;
}

Drawbacks

Just like all novel paradigms, there are some limitations to React Server Components.

Adoption. Demonstrating the full benefits of React Server Components with the react, react-dom and react-dom/server packages can be a lot for newbies, and even intermediate developers to wrap their heads around from routing to bundler configurations. So, it's important that there's a flexible and less boilerplate approach to adopting the full benefits of RSC. So far, the React team has partnered with the Next.js team to fully integrate RSC into the framework. Other Libraries and framework authors would learn from this approach as it's all open-source and could take a while before most of the API are fully standardised.

Developer Education. Introducing this feature in frameworks' latest releases and codebases across different projects and companies means more for developers to learn. This could mean new sets of questions in notable library repositories as issues, StackOverflow questions, and confusion around how to use and properly distinguish between server or clients components.

Conclusion

The React Server Components approach could grow into a wide range of useful solutions in different aspects of web apps and possibly eliminate current painful ways of writing React apps.

Possible applications: With the rise of generative AI (I tried my best to not include AI, but it's 2024), components could be specified to receive specific props, and different versions of the components could be rendered to users to enhance A/B testing.

Useful Links

React Docs: Server Components

React Server Components RFC

Nextjs: Rendering

React For Two Computers

Setup Apache Kafka Environment on Windows

Adebayo Ilerioluwa — Thu, 25 Mar 2021 10:14:18 +0000

In this article, I will be walking you through the process of installing Apache Kafka successfully on Windows. Let's dive into it.

Why use Apache Kafka?

Apache Kafka is an open-source distributed event streaming platform used by thousands of companies for high-performance data pipelines, streaming analytics, data integration, and mission-critical applications. You can use Kafka for real-time data streaming, big data collection, and real-time data analysis. It can be used with in-memory microservices ensuring durability. It will allow you to feed events to complex event streaming systems. It is one of the most commonly used fault-tolerant messaging systems.

Prerequisites

Download and Install the Java Runtime Environment (JRE8). This can be done in two different ways which are by:
- Download from the Oracle Java Official Downloads Page here
- Install using Chocolatey by pasting this script on your windows command line.

choco install jdk8

After installing, confirm your Java installation

java --version

Download and Install Apache Zookeeper

Apache Zookeeper helps keeps track of the status of the Kafka cluster nodes and it also keeps track of Kafka topics, partitions.

Get Started with Apache Kafka

For the installation process, please follow the steps given below:

Step 1: Visit Apache Kafka Official Download Page

Download the latest stable release of Apache Kafka Binaries - https://kafka.apache.org/downloads

Step 2: Extract Apache Folder

Visit your downloads folder
Extract the downloaded file and move it to any folder of your choice. For this tutorial, I recommend moving to the C:/ folder.

Step 3: Create directories for storing Kafka/zookeeper snapshots and logs

After moving to the C:/ folder ;

Create a data folder in the Kafka directory
Create Kafka and zookeeper directories inside the data folder

Step 4: Update configuration file for Zookeeper and Kafka Logs

In C:/kafka, open the config folder in a text editor and update the zookeeper.properties file. Change the dataDir variable to the path where your zookeeper snapshots will be stored as shown in the image below.

In the same config folder, update the server.properties file. Update the log.dirs variable to the path where your Kafka logs will be stored.

Step 5: Start Apache Zookeeper and Kafka

Start Apache zookeeper, Open windows command prompt, change your directory to c:/ and run the following scripts

cd kafka/bin/windows

zookeeper-server-start.bat ../../config/zookeeper.properties

Start Apache Kafka, open up a new command prompt

Run the following command from C:\kafka\bin\windows directory


kafka-server-start.bat  ../../config/server.properties

Apache Kafka should start running successfully on your machine 🎉🎉🎉🎉

Conclusion

Apache Kafka is now successfully installed on your machine, you can start making use of Kafka for event and data streaming. Learn more about Kafka Use cases and applications.

If you have any questions, don't hesitate to reach out me on Twitter: @adeileri

Configure Babel for a Nodejs Application

Adebayo Ilerioluwa — Sun, 31 Jan 2021 13:44:33 +0000

Introduction

What is Babel

From the official babel documentation site, Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript in current and older browsers or environments. Basically, Babel is a Javascript Compiler.

This article aims to explain and show how we can use Babel to access latest ES6 and above syntax features that are not included in recent Node.js versions. If you are interested to learn how Babel works under the hood, I would be sharing some useful resources at the last section of the article.

Project Setup

Prerequisites

Before you can get started, make sure to have an installed editor and terminal on your machine. Also, you will need an installed version of Node.js with npm. Make sure to have everything set up before you continue to read.

We need to initialize our project with a package.json file since we are going to install some packages that are necessary for the setup

npm init -y

Note: For this tutorial, we will be making use of npm as our package manager. If you are using yarn, make sure you run the corresponding command.

After successfully initializing our node project we install necessary dependencies.

First, we install express a web framework for Node.js and nodemon a tool used to automatically restart Node.js applications when file changes are detected.
Open your terminal and add the following snippets

npm install --save express
npm install --save-dev nodemon

Next, to install packages essential for babel setup.
It's advisable to install @babel/core @babel/cli as global dependencies.

npm install --save @babel/core @babel/cli

npm install --save-dev  @babel/node @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/polyfill

@babel/core - a fundamental package to run any babel setup/configuration.

@babel/cli - A built-in CLI which can be used to compile files from the command line/terminal.

@babel/node - babel-node is a CLI that works the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it.

Note: You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.

@babel/preset-env- is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller.

@babel/plugin-transform-runtime - A plugin that enables the re-use of Babel's injected helper code to save on code size.

@babel/runtime - a package to be installed production dependency to avoid duplication across your compiled output.

Then, we need to create a babel config file in our project root directory .babelrc and write the configuration to it. feel free to add extra config to this file


{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-transform-runtime"]
    ]
  }

With this done, let's create a simple Node.js/Express server. Start by creating an app.js file in the project root directory then add the following block of code to it.

import express from "express";
import bodyParser from "body-parser";

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get("/", (req, res) => {
  res.status(200).json({
    message: "I am using babel in NodeJS",
    status: "success",
  });
});

const PORT = process.env.PORT || 4200;
app.listen(PORT, () => {
  console.log("server up and running");
});

We've come so far, Our setup is ready and it is time to run our code for babel to do its magic ✨

Open your package.json file and make the following modifications to the script tags.

The start script will be used to compile your application code into a lower version of javascript, node.js understands and can be readily deployed to a node.js production server.

The start:dev script can be used to run our code locally in your runtime.

The clean script will be used to delete the previous builds folder when the start script is run.

The build-babel script makes use of @babel/cli as explained earlier to compile code in the terminal.

Finally, the build script runs both clean and build-babel commands.

 "scripts": {
    "start": "npm run build && node ./build/app.js",
    "start:dev": "nodemon --exec babel-node ./app.js",
    "clean": "rm -rf build && mkdir build",
    "build-babel": "babel -d ./build ./app.js -s",
    "build": "npm run clean && npm run build-babel"
  }

To conclude, let's run the start script to make sure everything works.

After running the start script, a folder build is created in your project root directory containing the compiled app.js file as shown in the image.

Now we can deploy our compiled application code to a node.js production server 🎉🎉.

Conclusion

We learnt how to configure Babel in our Node.js Project to compile latest javascript features to compatible versions for browsers and other environments.

If you have any questions or feedback about this article, feel free to reach out.
Thanks for reading.

Useful Links

https://github.com/babel/babel
https://github.com/jamiebuilds/babel-handbook
https://github.com/jamiebuilds/the-super-tiny-compiler

DEV Community: Adebayo Ilerioluwa

Building a universal React app with Expo, Next.js & Nativewind

Introduction

Problem

Expo

Next.js

React Native for Web

Prerequisites

Setup yarn workspaces

Install Turborepo

Setting up Packages

Structure of Monorepo

Setup default apps for native and web with Expo & Next.js

Setting up Nextjs app

Using Expo

Setting Up React Native Web in Next.js app

Updating Next.js Configuration

Resetting React Native Web styles

Creating first shared component

Using ui package

Configuring Metro bundler

Update default entry point for Expo app

Results

Universal Styling with NativeWind

Copy & paste in global.css file

Add babel preset

Modify Metro Config

Import your CSS file

Typescript Support

Next.js Support

Using Nativewind in shared UI

VSCode Intellisense Support

Troubleshooting

Links

Closing

adebayoileri / universal-app-starter

Expo + Next.js (with React Native Web) template styled using TailwindCSS & NativeWind, featuring a shared component library for developing universal React applications.

Universal App Starter

Get Started

Development

Build

Folder Structure

Apps and Packages

Technologies

Misc

RSC: Back to the Server

Motivation

Drawbacks

Conclusion

Useful Links

Setup Apache Kafka Environment on Windows

Why use Apache Kafka?

Prerequisites

Get Started with Apache Kafka

Step 1: Visit Apache Kafka Official Download Page

Step 2: Extract Apache Folder

Step 3: Create directories for storing Kafka/zookeeper snapshots and logs

Step 4: Update configuration file for Zookeeper and Kafka Logs

Step 5: Start Apache Zookeeper and Kafka

Conclusion

Configure Babel for a Nodejs Application

Introduction

What is Babel

Project Setup

Prerequisites

Conclusion

Useful Links

Setup default `apps` for native and web with Expo & Next.js

Copy & paste in `global.css` file