Forem: Mauro Garcia

Building a mobile authentication flow for your SaaS with Expo and Supabase

Mauro Garcia — Thu, 25 May 2023 13:46:00 +0000

Expo is an invaluable tool when it comes to developing mobile apps, offering a rich SDK with a wide range of packages. With services like EAS Build, the process of publishing your app becomes effortless. However, if your goal is to create a SaaS (Software as a Service), it becomes essential to have a backend for functionalities such as authentication and information storage.

In such cases, you may consider using Supabase as your backend solution. Supabase provides a seamless way to handle authentication, data storage, and more, complementing Expo's frontend capabilities to create a robust and scalable mobile app for a SaaS.

What do you get from this tutorial?

A new Supabase project with everything configured to handle authentication.
A working Expo app integrated with Supabase.
- A global Supabase context with easy access to interact with the Supabase client
- React-navigation setup for all the routes. You get IntelliSense for route names.
- Four working screens (Login, Register, Forgot Password, Home)
- Route security setup (only authenticated users can access the Home route).
Login flow using Supabase auth.
- Your session info is securely persisted locally using Expo Secure Store.
- Automatic refresh token flow
Register flow
Forgot Password flow
Setup to read environment variables from a .env file.

Expo-Supabase template is now available with SpiroKit!

For this demo app, I'll be using SpiroKit, which is a React Native UI kit I built. Given that is a paid product, feel free to follow this tutorial with your own UI.

With SpiroKit, you can use our new expo-supabase-typescript-template. It includes everything you’ll see in this tutorial.

Creating a new Supabase project

Supabase is an open-source project that offers a range of functionalities for hosting projects in the cloud. As of the time of writing, it allows users to host up to 2 projects in their free tier. If you have exceeded this quota, an alternative option is to host your own instance on a dedicated server. However, for the sake of simplicity, we will focus on utilizing the cloud project setup in this tutorial. Setting up a dedicated server falls outside the scope of this tutorial and will not be covered in detail.

Visit https://supabase.com and sign up if you don’t have an account
Once your account is ready, create your first project:
Choose a name for your project and a strong password. Make sure you are using the “Free” pricing plan if you are experimenting. You can update to a paid plan later if it’s required.
Hit the “Create new project” to confirm. If everything goes right, you’ll be redirected to the home page of your new Supabase project. You’ll need to copy the Project URL and the API key (anon) later to connect your project with your Expo app

Setting up authentication on Supabase

Every Supabase project comes with a full Postgres database. We’ll be using it to support our basic authentication flow with email and password.

From your supabase project dashboard, use the sidebar to visit the “SQL Editor” section
Under the “Quick Start” section, you’ll find the “User Management Starter” card. This will help us setup all the required tables for the auth flow.
You can click the “Run” button to execute the query as is, or you can make a few modifications before execution based on your needs. This script will perform the following tasks:
1. Create Table: Defines a table called profiles with various columns to store information about public profiles, such as ID, updated timestamp, username, full name, avatar URL, and website. It also includes a constraint to ensure that the username length is at least 3 characters.
2. Set up Row Level Security (RLS): Enables Row Level Security for the profiles table. RLS allows controlling access to individual rows based on policies. If you want lo learn more about this powerful feature, visit the following link
3. Create Policies: Defines three policies to control access to the profiles table:
  - "Public profiles are viewable by everyone.": Grants read access to all rows in the profiles table.
  - "Users can insert their own profile.": Allows users to insert a row into the profiles table only if their authenticated user ID matches the "id" column.
  - "Users can update their own profile.": Permits users to update their own profile by matching their authenticated user ID with the "id" column.
4. Create a function and a Trigger: Sets up a trigger function named "handle_new_user" and a trigger named "on_auth_user_created" to automatically create a profile entry when a new user signs up via Supabase Auth (we’ll use this on our Expo app later). The trigger function extracts relevant information from the newly created user and inserts it into the profiles table.
5. Set up Storage: Inserts a row into the storage.buckets table to define a bucket named "avatars" for storing avatar images.
6. Create Storage Policies: Defines two policies to control access to the "avatars" bucket in storage:
  - "Avatar images are publicly accessible.": Allows anyone to retrieve (select) objects from the "avatars" bucket.
  - "Anyone can upload an avatar.": Permits anyone to insert (upload) objects into the "avatars" bucket.
  For simplicity, I’ll execute the script as is.
We can now visit the “Table Editor” section using the sidebar and check that the profiles table was created

Creating an Expo app

Now that we are done with Supabase, it’s time to create our Expo app.

Because I’m using SpiroKit, I’ll be using the Expo Starter template that already comes with everything setup and ready to use. If you choose to also use SpiroKit, make sure to get your license and follow the installation instructions before running the following command:

npx create-spirokit-app --template expo-template-typescript

If you want to create a plain React Native app with Expo, run this command instead:

npx create-react-native-app -t with-typescript

# This is optional if you want to add icons to your screens. 
# It's already included with the SpiroKit template
yarn add react-native-heroicons

Setting up Supabase in your Expo app

You will need to run the following command to install all the required packages

yarn add @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill

# Required for accessing env variables during development
yarn add -D babel-plugin-inline-dotenv 

# Required to encrypt the information in the device
npx expo install expo-secure-store

Because we are using Expo Secure Store later to store information, we will need to update our app.json file to avoid issues with App Store Connect during app submission. We will set the usesNonExemptEncryption option to false like this: ****
```
{
  "expo": {
    "ios": {
      "config": {
        "usesNonExemptEncryption": false
      }
    }
  }
}
```
Setting this property automatically handles the compliance information prompt, as described in the Expo docs
Now, let’s create a SupabaseContext that will allow us to get interact with the supabase client from any screen of our app. Run the following commands to create the src folder, then the context folder inside, and finally, a few empty files to implement our context.
```
mkdir src
mkdir src/context
touch ./src/context SupabaseContext.tsx
touch ./src/context SupabaseProvider.tsx
touch ./src/context useSupabase.tsx
```

The SupabaseContext.tsx will define the contract for the provider. We’ll add a isLoggedIn flag to easily check the session status, and a few methods to interact with Supabase auth service

import { createContext } from "react";

type SupabaseContextProps = {
  isLoggedIn: boolean;
  login: (email: string, password: string) => Promise<void>;
  register: (email: string, password: string) => Promise<void>;
  forgotPassword: (email: string) => Promise<void>;
  logout: () => Promise<void>;
};

export const SupabaseContext = createContext<SupabaseContextProps>({
  isLoggedIn: false,
  login: async () => {},
  register: async () => {},
  forgotPassword: async () => {},
  logout: async () => {},
});

Then, add the following code to the SupabaseProvider.tsx file to initialize the Supabase client and implement all the required methods. We also need the isNavigationReady to load our navigation stack after the session info is available. That way, we can hide certain routes for anonymous users.

import "react-native-url-polyfill/auto";
import { createClient } from "@supabase/supabase-js";
import React, { useState, useEffect } from "react";
import * as SecureStore from "expo-secure-store";
import { SupabaseContext } from "./SupabaseContext";

// We are using Expo Secure Store to persist session info
const ExpoSecureStoreAdapter = {
  getItem: (key: string) => {
    return SecureStore.getItemAsync(key);
  },
  setItem: (key: string, value: string) => {
    SecureStore.setItemAsync(key, value);
  },
  removeItem: (key: string) => {
    SecureStore.deleteItemAsync(key);
  },
};

type SupabaseProviderProps = {
  children: JSX.Element | JSX.Element[];
};

export const SupabaseProvider = (props: SupabaseProviderProps) => {
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [isNavigationReady, setNavigationReady] = useState(false);

  const supabase = createClient(
    process.env.SUPABASE_URL,
    process.env.SUPABASE_ANON_KEY,
    {
      auth: {
        storage: ExpoSecureStoreAdapter,
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: false,
      },
    }
  );

  const login = async (email: string, password: string) => {
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
    if (error) throw error;
    setLoggedIn(true);
  };

  const register = async (email: string, password: string) => {
    const { error } = await supabase.auth.signUp({
      email,
      password,
    });
    if (error) throw error;
  };

  const forgotPassword = async (email: string) => {
    const { error } = await supabase.auth.resetPasswordForEmail(email);
    if (error) throw error;
  };

  const logout = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) throw error;
    setLoggedIn(false);
  };

  const checkIfUserIsLoggedIn = async () => {
    const result = await supabase.auth.getSession();
    setLoggedIn(result.data.session !== null);
    setNavigationReady(true);
  };

  useEffect(() => {
    checkIfUserIsLoggedIn();
  }, []);

  return (
    <SupabaseContext.Provider
      value={{ isLoggedIn, login, register, forgotPassword, logout }}
    >
      {isNavigationReady ? props.children : null}
    </SupabaseContext.Provider>
  );
};

Finally, we’ll use the useSupabase.tsx file to create a convenient hook:

import React from "react";
import { SupabaseContext } from "./SupabaseContext";

export const useSupabase = () => React.useContext(SupabaseContext);

Because we are using TypeScript, we’ll also need to create a app.d.ts to define the types for our environment variables
```
touch app.d.ts
```
Now let’s add our environment variables to the declaration file
```
// app.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
    SUPABASE_URL: string;
    SUPABASE_ANON_KEY: string;
  }
}
```
If you still have typescript errors on your hook, run the “reload window” command in VSCode, or just close and open the IDE to refresh everything.
To properly get access to our environment variables during development, we need to update our babel.config.js file to add the “inline-dotenv” plugin. It should look like this:
```
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["inline-dotenv"], // -> Required to read env variables
  };
};
```
We’ll also need to create the .env file in the root of our project and provide a value for the SUPABASE_URL and SUPABASE_ANON_KEY variables:
```
touch .env
```

```typescript
SUPABASE_URL="YOUR_SUPABASE_URL"
SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"
```

> If you already run your app before creating the `.env` file, please run the app with the `expo r -c` command to clear the expo cache. Otherwise, your environment variables won’t work. This is required every time the `.env` file is updated.

Setting up React Navigation

Because we are adding a few screens like Login, Register, ForgotPassword, and Home, we will need to add React Navigation to easily navigate through the screens.

Let’s start by installing the required dependencies

npx expo install @react-navigation/native @react-navigation/stack react-native-gesture-handler

I’ll create a navigation folder to store all the required components here. But feel free to choose a different location for your files
```
mkdir navigation
touch navigation/GlobalNavigation.tsx
```

We’ll also need to create a few dummy screens

mkdir screens
touch screens/LoginScreen.tsx
touch screens/RegisterScreen.tsx
touch screens/ForgotPasswordScreen.tsx
touch screens/HomeScreen.tsx

For all the screens, let’s add a temp UI

// screens/LoginScreen.tsx
import { Box, LargeTitle } from "@spirokit/core";

const LoginScreen = () => {
  return (
    <Box safeArea>
      <LargeTitle>Login Screen</LargeTitle>
    </Box>
  );
};

export default LoginScreen;

// screens/RegisterScreen.tsx
import { Box, LargeTitle } from "@spirokit/core";

const RegisterScreen = () => {
  return (
    <Box safeArea>
      <LargeTitle>Register Screen</LargeTitle>
    </Box>
  );
};

export default RegisterScreen;

// screens/ForgotPasswordScreen.tsx
import { Box, LargeTitle } from "@spirokit/core";

const ForgotPasswordScreen = () => {
  return (
    <Box safeArea>
      <LargeTitle>Forgot Password Screen</LargeTitle>
    </Box>
  );
};

export default ForgotPasswordScreen;

// screens/HomeScreen.tsx
import { Box, LargeTitle } from "@spirokit/core";

const HomeScreen = () => {
  return (
    <Box safeArea>
      <LargeTitle>Home Screen</LargeTitle>
    </Box>
  );
};

export default HomeScreen;

Now that we have all our screens, we can go back to the GlobalNavigation.tsx file and add the Stack navigation with all our screens

// navigation/GlobalNavigation.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import ForgotPasswordScreen from "../screens/ForgotPasswordScreen";
import HomeScreen from "../screens/HomeScreen";
import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import { useSupabase } from "../context/useSupabase";

const Stack = createStackNavigator();

const GlobalNavigation = () => {
  // We check if the user is logged in
  const { isLoggedIn } = useSupabase();

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={isLoggedIn ? "Home" : "Login"}
        screenOptions={{ headerShown: false }}
      >
        {/* Only authenticated users can access the home */}
        {isLoggedIn ? (
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Register" component={RegisterScreen} />
            <Stack.Screen
              name="ForgotPassword"
              component={ForgotPasswordScreen}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default GlobalNavigation;

Then, we need to update our App.tsx file to add our supabase context and our new global navigation.

import { SpiroKitProvider, usePoppins, useSpiroKitTheme } from "@spirokit/core";
import GlobalNavigation from "./src/navigation/GlobalNavigation";
import { SupabaseProvider } from "./src/context/SupabaseProvider";

const myTheme = useSpiroKitTheme();

export default function App() {
  const fontLoaded = usePoppins();

  if (!fontLoaded) return <></>;

  return (
    <SpiroKitProvider theme={myTheme}>
      <SupabaseProvider>
        <GlobalNavigation></GlobalNavigation>
      </SupabaseProvider>
    </SpiroKitProvider>
  );
}

Finally, let’s create a GlobalParamList.tsx inside our navigation folder to add proper IntelliSense to our routes while using navigation.navigate("routeName") to move between screens
```
touch navigation/GlobalParamList.tsx
```

```typescript
import { StackNavigationProp } from "@react-navigation/stack";

export type GlobalParamList = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  ForgotPassword: undefined;
};

export type ScreenNavigationProp = StackNavigationProp<GlobalParamList>;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends GlobalParamList {}
  }
}
```

Updating the Login screen

With the Supabase context set and our navigation stack in place, we need to update all the different screens. Let’s start with the Login with a few comments:

We are using the useSupabase hook to call the login method
We wrap the screen with a KeyboardAvoidingView to prevent annoying issues with the keyboard (this applies to all our screens below)

// screens/LoginScreen.tsx

import {
  Body,
  Button,
  Input,
  KeyboardAvoidingView,
  Pressable,
  TitleTwo,
  VStack,
  Image,
  Subhead,
} from "@spirokit/core";
import React from "react";
import { Platform, ScrollView } from "react-native";
import { LockClosedIcon, MailIcon } from "react-native-heroicons/outline";
import { useNavigation } from "@react-navigation/native";
import { useHeaderHeight } from "@react-navigation/elements";
import { useSupabase } from "../context/useSupabase";

const LoginScreen = () => {
  const navigation = useNavigation();
  const height = useHeaderHeight();
  const { login } = useSupabase();

  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const onSignInTapped = async () => {
    try {
      setLoading(true);
      await login(email, password);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      flex={1}
      keyboardVerticalOffset={height}
      backgroundColor={"primaryGray.100"}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <VStack safeAreaTop padding={4} flex={1}>
          <VStack space={4} marginTop={5} width="full" flex={1}>
            <Image
              source={{ uri: "https://i.imgur.com/FawVClJ.png" }}
              width="full"
              height={200}
              alt="Login icon"
              resizeMode="contain"
            ></Image>
            <TitleTwo fontWeight="medium">Sign in</TitleTwo>
            <Input
              placeholder="Enter your email"
              IconLeftComponent={MailIcon}
              onChangeText={(text) => setEmail(text)}
            ></Input>
            <Input
              placeholder="Enter your password"
              secureTextEntry={true}
              IconLeftComponent={LockClosedIcon}
              onChangeText={(text) => setPassword(text)}
            ></Input>
            <Pressable onPress={() => navigation.navigate("ForgotPassword")}>
              <Subhead textAlign={"right"} paddingBottom="2">
                Forgot Password?
              </Subhead>
            </Pressable>

            <Button
              isDisabled={loading}
              onPress={() => onSignInTapped()}
              marginBottom={5}
            >
              {loading ? "Loading..." : "Sign in"}
            </Button>
          </VStack>
        </VStack>

        <VStack padding={4} backgroundColor={"white"} safeAreaBottom>
          <Body textAlign={"center"}>
            Have an account?{" "}
            <Pressable onPress={() => navigation.navigate("Register")}>
              <Body fontWeight="bold" textDecorationLine="underline">
                Sign up
              </Body>
            </Pressable>
          </Body>
        </VStack>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default LoginScreen;

Updating the Register screen

With the Login screen done, let’s work on the register screen:

// screens/RegisterScreen.tsx

import {
  Body,
  Button,
  Input,
  KeyboardAvoidingView,
  Pressable,
  TitleTwo,
  VStack,
  Image,
} from "@spirokit/core";
import React from "react";
import { Platform, ScrollView } from "react-native";
import { LockClosedIcon, MailIcon } from "react-native-heroicons/outline";

import { useNavigation } from "@react-navigation/native";
import { useHeaderHeight } from "@react-navigation/elements";
import { useSupabase } from "../context/useSupabase";

const RegisterScreen = () => {
  const navigation = useNavigation();
  const height = useHeaderHeight();

  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const { register } = useSupabase();

  const onSignUpTapped = async () => {
    try {
      setLoading(true);
      await register(email, password);
      navigation.navigate("Login");
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      flex={1}
      keyboardVerticalOffset={height}
      backgroundColor={"primaryGray.100"}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <VStack
          safeAreaTop
          padding={4}
          alignItems="flex-start"
          width="full"
          flex={1}
        >
          <VStack space={4} marginTop={5} width="full" flex={1}>
            <Image
              source={{ uri: "https://i.imgur.com/oNY0QGb.png" }}
              width="full"
              height={200}
              alt="Register icon"
              resizeMode="contain"
            ></Image>
            <TitleTwo fontWeight="medium">Sign up</TitleTwo>
            <Input
              placeholder="Enter your email"
              IconLeftComponent={MailIcon}
              onChangeText={(text) => setEmail(text)}
            ></Input>
            <Input
              placeholder="Enter your password"
              secureTextEntry={true}
              IconLeftComponent={LockClosedIcon}
              onChangeText={(text) => setPassword(text)}
            ></Input>
            <Button
              isDisabled={loading}
              marginBottom={5}
              onPress={() => onSignUpTapped()}
            >
              {loading ? "Loading..." : "Sign up"}
            </Button>
          </VStack>
        </VStack>
        <VStack padding={4} safeAreaBottom>
          <Body textAlign={"center"}>
            If you have an account,{" "}
            <Pressable onPress={() => navigation.navigate("Login")}>
              <Body fontWeight="bold" textDecorationLine="underline">
                Sign in
              </Body>
            </Pressable>
          </Body>
        </VStack>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default RegisterScreen;

Updating the Forgot Password screen

We are using the useSupabase hook to call the forgotPassword method
We are using an Alert component to show a message after the recovery email was sent.
Feel free to improve the error handling in the onSendTapped to show a custom error if something goes wrong.

// screens/ForgotPasswordScreen.tsx

import {
  Body,
  Button,
  Input,
  KeyboardAvoidingView,
  Pressable,
  TitleTwo,
  VStack,
  Image,
  Alert,
  TitleOne,
} from "@spirokit/core";
import React from "react";
import { Platform, ScrollView } from "react-native";
import { MailIcon } from "react-native-heroicons/outline";

import { useNavigation } from "@react-navigation/native";
import { useHeaderHeight } from "@react-navigation/elements";
import { useSupabase } from "../context/useSupabase";

const ForgotPasswordScreen = () => {
  const navigation = useNavigation();
  const height = useHeaderHeight();

  const [email, setEmail] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [showResultModal, setShowResultModal] = React.useState(false);

  const { forgotPassword } = useSupabase();

  const onFinishTapped = () => {
    setShowResultModal(false);
    navigation.navigate("Login");
  };

  const onSendTapped = async () => {
    try {
      setLoading(true);
      await forgotPassword(email);
      setShowResultModal(true);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      flex={1}
      keyboardVerticalOffset={height}
      backgroundColor={"primaryGray.100"}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <VStack
          safeAreaTop
          padding={4}
          alignItems="flex-start"
          width="full"
          flex={1}
        >
          <VStack space={4} marginTop={5} width="full" flex={1}>
            <Image
              source={{ uri: "https://i.imgur.com/sDzRjS4.png" }}
              width="full"
              alt="Forgot password icon"
              height={200}
              resizeMode="contain"
            ></Image>
            <TitleTwo fontWeight="medium">Forgot password?</TitleTwo>
            <Input
              placeholder="Enter your email"
              IconLeftComponent={MailIcon}
              onChangeText={(text) => setEmail(text)}
            ></Input>
            <Button
              isDisabled={loading}
              marginBottom={5}
              onPress={() => onSendTapped()}
            >
              {loading ? "Loading..." : "Send"}
            </Button>
          </VStack>
        </VStack>
        <VStack padding={4} safeAreaBottom>
          <Body textAlign={"center"}>
            If you have an account,{" "}
            <Pressable onPress={() => navigation.navigate("Login")}>
              <Body fontWeight="bold" textDecorationLine="underline">
                Sign in
              </Body>
            </Pressable>
          </Body>
        </VStack>
        <Alert
          isVisible={showResultModal}
          onClose={() => setShowResultModal(false)}
          TitleComponent={<TitleOne>Email sent</TitleOne>}
          ConfirmButtonComponent={
            <Button onPress={() => onFinishTapped()}>Ok</Button>
          }
        ></Alert>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default ForgotPasswordScreen;

Updating the Home Screen

Primarily used to test routing security and allow users to logout
After logout, the Supabase Context is updated, and the Global Navigation will trigger a re-render. The user is automatically redirected to the Login screen.

// screens/Home.tsx

import { Button, LargeTitle, Image, VStack } from "@spirokit/core";
import { useSupabase } from "../context/useSupabase";

const HomeScreen = () => {
  const { logout } = useSupabase();
  return (
    <VStack space={8} safeArea padding={4} flex={1} justifyContent="center">
      <LargeTitle textAlign={"center"}>Welcome!</LargeTitle>
      <Image
        source={{ uri: "https://i.imgur.com/k78EnxY.png" }}
        width="full"
        alt="Hello icon"
        height={200}
        resizeMode="contain"
      ></Image>
      <Button onPress={() => logout()}>Logout</Button>
    </VStack>
  );
};

export default HomeScreen;

Final thoughts

That was an intense article! But I wanted to cover the entire flow. There are many things we could improve or add, but I’m thinking of building a series around it. We could add a working example retrieving information from Supabase db or include additional auth mechanisms.

I would love to hear your thoughts! Your input can help me shape the upcoming articles.

6 React Native UI Kits for 2023

Mauro Garcia — Wed, 30 Nov 2022 22:53:00 +0000

Building apps take time

Building a mobile app is a challenging task. From coming up with an idea, prototyping, and finally building the app, there are many things to consider and problems we'll have to figure out:

How do we make sure the entire app looks consistent?
Do we need to support dark mode?
Should the app feel like an iOS or an Android app? Maybe something in between.
Is our app accessible and inclusive?

If you are building everything from scratch, you may need years of design experience to create something that looks consistent and, at the same time, has a clear answer to all the questions we mentioned early. On the other hand, building an accessible app with dark mode support and a cohesive look and feel takes a lot of time.

React Native UI Kits

We already established that building a mobile app from scratch is challenging and takes time. The good news is that there's a solution for that problem: We can use a React Native UI Kit.

A UI kit is a collection of assets containing design elements such as UI components, styles, and rules. UI components are elements that convey meaning and provide functionality to users.

Why should we use a React Native UI Kit?

UI kits can help you improve a design and development workflow in many ways:

Speed up the design and build processes: We can rely on ready-to-use UI elements from the kit instead of creating our own elements.
Time to market: We can ship faster and test our ideas by drastically reducing the design and development phases.
Don't reinvent the wheel: As developers and entrepreneurs, we aim to solve a critical problem for our users. Therefore, we should focus our time and energy on solving that problem instead of creating a custom interface.
Achieve consistency in your app: The design elements from a UI kit have a consistency that can be hard to achieve if you are building everything from scratch.
Become a better designer: UI kits allow us to inspect the different elements and learn from them.

Best React Native UI Kits

Here's a list of the best React Native UI kits you can use to build your next app.

SpiroKit

A library with more than one year in the making. SpiroKit is not only a UI Kit but a complete toolkit for indie hackers that includes: Figma templates, UI Kit, Boilerplates & App templates.

It comes with 17 ready-to-use color palettes combined with three shades of gray (warm, neutral, and cool). Besides, it includes a global ThemeProvider that allows you to add your own color palette, custom fonts, and much more!

Every component comes with dark mode support, meaning that you don't need to do anything besides implementing a simple toggle for your users.

SpiroKit also includes a complete documentation portal built with StorybookJS, where you can copy-paste hundreds of working code examples.

This is a paid product, but we support Purchase Power Parity, so if you are interested, check out the landing page to see if you are eligible for a discount.

Resources & stats

Links:
- Website
- Docs

React Native Elements

This is easily one of the more popular options available.
It's open source and has its own VSCode Extension for snippets with preview and auto import. About customization, it includes a global ThemeProvider that you can use to setup your own theme from scratch.

Resources & stats

23k stars on GitHub
Links:
- GitHub
- Website

NativeBase

NativeBase is an accessible, utility-first component library that helps you build consistent UI across Android, iOS, and Web.

This is another excellent library with tons of customization options, a global theme provider, powerful hooks that allows you to quickly implement dark mode support on your components, app boilerplates, and much more.

One thing I love about NativeBase is that it's powered by React Native Aria, which provides React hooks that enable you to build accessible design systems in no time.

Resources & stats

18.6k stars on GitHub
Links:
- GitHub
- Website
- Docs

React Native Paper

Another popular kit. It's cross-platform but based on Google's Material Design guidelines.
It has a default theme, but you can implement your own using the global ThemeProvider.

It also includes a documentation portal with all you need to setup your project.

One thing to notice is that this kit doesn't have app boilerplates, so you must go through the installation process to add this UI kit to your projects.

Resources & stats

10k stars on GitHub
Links:
- GitHub
- Website

UI Kitten

A beautiful cross-platform UI Kit based on Eva Design System.

It also includes:

Complete documentation portal with examples to copy/paste
App boilerplates
ThemeProvider and light/dark mode support
You can build your own themes.
It has its own icon pack with 480 icons (based on Eva Design System).

Resources & stats

9.4k stars on GitHub
Links:
- GitHub
- Website

Tamagui

Disclaimer: This is still in early beta, meaning you may have to deal with breaking changes.

A style system, UI kit, and optimizing compiler for React Native & Web

A cross-platform UI Kit for Universal apps with a fantastic innovation: It's also a compiler that optimizes the output on build time. If you are familiar with Svelte, this is similar but for universal apps with React Native.

This kit also has a core package (@tamagui/core), which is a good option if you want to build your own design system with a solid foundation.

It includes excellent documentation, and the team behind this project is moving fast. So keep an eye on this project in 2023.

Resources & stats

2.8k stars on GitHub
Links:
- GitHub
- Website
- Docs

Conclusions

The React Native ecosystem is constantly evolving, with many unique projects like those mentioned above.

Here are a few questions you should ask yourself before choosing the best option for you:

Do I need complete control to customize every component?
How much time do I have to build my next app?
Do I want to build my own theme / define my color palette?
Is it easy to implement? Does it include good documentation?

Based on your answers, you'll find the best solution for your specific situation.

Bridging the gap between web & native with Expo router

Mauro Garcia — Wed, 26 Oct 2022 21:06:00 +0000

Intro

Historically speaking, trying to handle navigation on a universal app (that targets web and mobile) was a pain in the ass.

Navigation on the web usually is quite simple, and Next.js did a fantastic job with its file system-based router.

In mobile land, things are not that simple. Fernando Rojo did a fantastic job with Solito, which is a wrapper around React Navigation and Next.js that lets you share navigation code across platforms. This project gained a lot of traction, and the community started to work on solving the problem of navigation for universal apps.

Introducing Expo Router

I heard about Expo Router a few months ago, and I instantly loved the concept:
What if we could have something like Next.js file-system-based router, but for universal apps? That is Expo Router.

What's the big deal about this library?

"Expo Router brings the best routing concepts from the web to native iOS and Android apps. Every file in the app directory automatically becomes a route in your mobile navigation, making it easier than ever to build, maintain, and scale your project."

If you've had to deal with deep linking on your mobile apps in the past, you already know that this is another major pain.

Expo Router was built on top of React Navigation, and the entire deep linking system is automatically generated, meaning that you can share the same link on the web and mobile, and the deep link will automatically work 🤯.

No more weird mapping and matching routes.

There are tons of additional features like Offline support, but if you want to learn more about all these features, here's the official docs

Given that this library is still in beta, some links may change

Building a magazine app

I wanted to test features like tab and stack navigation to get a first sense of how it feels to work on a real app using Expo Router, so I decided to build a very simple magazine app that shows a list of news and allows the user to navigate to each news to read more about it.

For this demo app, I'll be using SpiroKit, which is a React Native UI kit I built. Given that is a paid product, feel free to follow this tutorial with your own UI.

Project setup

With SpiroKit

If you've decided to use SpiroKit, follow these steps to quickly generate a new expo project with SpiroKit and Expo Router:

Get your SpiroKit license here.
Create a new project using the template

expo init my-app --template @spirokit/expo-router-template

Add SpiroKit to your project: Download the spirokit-core-[version].tgz file from Gumroad and add it to the root of your project.

Install the package by running the following command:

yarn add ./spirokit-core-[version].tgz

With your own UI

Run the following command to create a new project with expo-router:

npx create-react-native-app -t with-router

First use

After creating my first project using the expo template, I just run yarn start.

By default, the starter templates don't include the app folder, so there is nothing to show. But we will get a friendly welcome message that will let us create our first route by only clicking the “touch app/index.js” button

After clicking the button, I instantly got an update on all my devices (both web and mobile)

After returning to my code, I confirmed that the new app/index.js file was created.

// app/index.js
import { Link, Stack } from "expo-router";
import { StyleSheet, Text, View } from "react-native";

export default function Page() {
  return (
    <View style={styles.container}>
      <View style={styles.main}>
        <Text style={styles.title}>Hello World</Text>
        <Text style={styles.subtitle}>This is the first page of your app.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 24,
  },
  main: {
    flex: 1,
    justifyContent: "center",
    maxWidth: 960,
    marginHorizontal: "auto",
  },
  title: {
    fontSize: 64,
    fontWeight: "bold",
  },
  subtitle: {
    fontSize: 36,
    color: "#38434D",
  },
});

Given that Expo Router is file-system based, we'll need to create new directories and files based on our needs.

My magazine app will use a bottom tab navigation with 2 main sections:

News
Settings

At the same time, the "News" section will use a Stack navigator to allow us to navigate to the details page. More about this below.

Let's start building our app!

1. Adding the Tab navigator

We need to add a tab navigator so we can navigate between the "news" and "settings" tabs.

Expo Router includes a feature called "Layout Routes". From the official docs:

"To render shared navigation elements like a header, tab bar, or drawer, you can use a Layout Route. If a directory contains a file named _layout.js, it will be used as the layout component for all the sibling files in the directory."

Let's create our app/_layout.js and add the Tab navigation we need:

// app/_layout.js
import { SpiroKitProvider, usePoppins, useSpiroKitTheme } from "@spirokit/core";
import { Tabs } from "expo-router";

// Setting up some global preferences for theming
const theme = useSpiroKitTheme({
  config: {
    colors: {
      primaryGray: "coolGray",
      primaryDark: "coolDark",
    },
  },
});

export default function Layout() {
  const fontLoaded = usePoppins();

  if (!fontLoaded) return <></>;
  return (
    {/* Required for SpiroKit */}
    <SpiroKitProvider theme={theme}>
      {/* This will add the Tabs navigator */}
      <Tabs screenOptions={{ headerShown: false }}>
        {/* This allows us to further customize any given route */}
        <Tabs.Screen
          name="index"
          options={{
            // This tab will no longer show up in the tab bar.
            href: null,
          }}
        />
      </Tabs>
    </SpiroKitProvider>
  );
}

I'm excluding the index route from the Tab Bar by setting the href to null. I just want "news" and "settings" to be included in the Tab Bar.

2. Updating the `app/index.js` file

With the tabs navigator in place, I wanted to have a welcome screen (app/index.js), with a button that redirects to the news section.

Expo Router provides many options to move between routes, but given that it's still in beta, some things may not be supported yet. In this case, I'm using the useLink hook to move between routes.

// app/index.js
import * as React from "react";
import { useLink } from "expo-router";
import { HomeIcon } from "react-native-heroicons/outline";

import { Button, Image, LargeTitle, VStack } from "@spirokit/core";
export default function Page() {
  // The useLink hook allows us to navigate between routes
  const link = useLink();
  return (
    <VStack
      space={4}
      justifyContent="center"
      alignItems={"center"}
      flex={1}
      backgroundColor={{
        linearGradient: {
          colors: ["primary.600", "emerald.800"],
          start: [0, 1],
          end: [1, 0],
        },
      }}
    >
      <Image
        width={64}
        borderWidth={8}
        borderColor="primary.500"
        height={64}
        borderRadius="full"
        source={{
          uri: "https://images.pexels.com/photos/1369476/pexels-photo-1369476.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        }}
      ></Image>
      <LargeTitle color="white" width={"1/2"} textAlign="center">
        Welcome to magazine App
      </LargeTitle>

      {/* Here I'm using the onPress event to trigger the navigation */}
      {/* This won't work until we create the news route below */}
      <Button
        variant="secondary"
        textColor="white"
        colorMode={"dark"}
        IconLeftComponent={HomeIcon}
        width="auto"
        onPress={() => link.push("news")}
      >
        Home
      </Button>
    </VStack>
  );
}

After these changes, the welcome screen should look like this:

3. Adding the "News" and "Settings" tabs

Let's start by creating the app/news and app/settings directories.

mkdir news
mkdir settings

Your project should look like this:

├── app
│   ├── index.js
│   ├── _layout.js
│   ├── news
│   │   ├── Empty directory
│   └── settings
│   │   ├── Empty directory
├── app.json
├── babel.config.js
├── index.js
├── package.json
├── README.md
└── yarn.lock

We'll also need to define which navigator to use on each tab. In this case, I decided to use stack navigators on each tab.
Let's create the index.js and _layout.js files inside "news" and "settings" directories:

touch ./app/news/index.js ./app/news/_layout.js ./app/settings/index.js ./app/settings/_layout.js

Now, your project structure should look like this:

├── app
│   ├── index.js
│   ├── _layout.js
│   ├── news
│   │   ├── index.js
│   │   └── _layout.js
│   └── settings
│       ├── index.js
│       └── _layout.js
├── app.json
├── babel.config.js
├── index.js
├── package.json
├── README.md
└── yarn.lock

To add the stack navigators, add this to the app/news/_layout.js and app/settings/_layout.js files:

// app/news/_layout.js
// app/settings/_layout.js
import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack screenOptions={{ headerShown: false }}></Stack>;
  )
}

Finally, let's customize the app/news/index.js and app/settings/index.js files to include a simple message:

// app/news/index.js
import { Center, LargeTitle } from "@spirokit/core";

export default function News() {
  return (
    <Center flex={1}>
      <LargeTitle>News route</LargeTitle>
    </Center>
  )
}

// app/settings/index.js
import { Center, LargeTitle } from "@spirokit/core";

export default function News() {
  return (
    <Center flex={1}>
      <LargeTitle>Settings route</LargeTitle>
    </Center>
  )
}

You should now be able to navigate between tabs 🎉

4. Adding UI to the "News" Route

Let's add some UI to our news route. Don't worry if you are not using SpiroKit. The key takeaway here is that we'll use the useLink hook from Expo Router to navigate to the news details route.

// app/news/index.js

import {
  Button,
  VerticalCard,
  Badge,
  Avatar,
  TitleThree,
  Subhead,
  Image,
  Footnote,
  Box,
  HorizontalCard,
  VStack,
  HStack,
  LargeTitle,
  useColorModeValue,
  Pressable,
} from "@spirokit/core";
import { useLink } from "expo-router";
import { ScrollView } from "react-native";
import { BellIcon, LightBulbIcon } from "react-native-heroicons/outline";

export default function News() {
  const link = useLink();

  return (
    <Box
      flex={1}
      backgroundColor={useColorModeValue("white", "primaryDark.1")}
      safeArea
    >
      <ScrollView>
        <VStack space={4} flex={1} padding={4}>
          <HStack
            space={4}
            justifyContent="space-between"
            alignItems={"center"}
          >
            <LargeTitle>News</LargeTitle>
            <Button IconLeftComponent={BellIcon} size="sm" width="auto">
              Subscribe
            </Button>
          </HStack>
          {/* We are using the push method to navigate to news details */}
          <Pressable onPress={() => link.push("/news/1234")}>
            <MainTravelCard></MainTravelCard>
          </Pressable>

          <SecondaryTravelCard></SecondaryTravelCard>
          <FoodCard></FoodCard>
        </VStack>
      </ScrollView>
    </Box>
  );
}

const MainTravelCard = () => {
  return (
    <VerticalCard
      BadgeComponent={<Badge>Travel</Badge>}
      UserAvatarComponent={
        <Avatar
          alt="Siv Marko profile image"
          source={{ uri: "https://i.imgur.com/pfR8Ytj.png" }}
        ></Avatar>
      }
      userName="Siv Marko"
      TitleComponent={
        <TitleThree>Resting place of Australia's last convict ship</TitleThree>
      }
      DescriptionComponent={
        <Subhead>
          Wellington, New Zealand (CNN) - The storm that struck the Edwin Fox on
          February 1873 might sound dramatic.
        </Subhead>
      }
      DateComponent={<Footnote>15th June 2021</Footnote>}
      AssetComponent={
        <Image
          source={{ uri: "https://i.imgur.com/1lSpdz3.png" }}
          alt="Image of a ship"
        ></Image>
      }
    ></VerticalCard>
  );
};

const SecondaryTravelCard = () => {
  return (
    <HorizontalCard
      UserAvatarComponent={
        <Avatar
          alt="Kenny Grimes profile image"
          source={{ uri: "https://i.imgur.com/mwax0m0.png" }}
        ></Avatar>
      }
      userName="Kenny Grimes"
      TitleComponent={
        <TitleThree>
          Emirates introduces digital health verification for UAE passengers
        </TitleThree>
      }
      DescriptionComponent={
        <Subhead>
          Emirates and the Dubai Health Authority (DHA) have begun to implement
          full digital verification of Covid-19 medical records
        </Subhead>
      }
      DateComponent={<Footnote>15th June 2021</Footnote>}
      AssetLeftComponent={
        <Image
          source={{ uri: "https://i.imgur.com/EflHxyi.png" }}
          alt="Image of a ship"
        ></Image>
      }
    ></HorizontalCard>
  );
};

const FoodCard = () => {
  return (
    <HorizontalCard
      UserAvatarComponent={
        <Avatar
          alt="Paula Green profile image"
          source={{ uri: "https://i.imgur.com/Vbzbh6Z.png" }}
        ></Avatar>
      }
      userName="Paula Green"
      TitleComponent={
        <TitleThree>
          The Best Marinara Sauce You Can Get At The Store
        </TitleThree>
      }
      DateComponent={<Footnote>15th June 2021</Footnote>}
      AssetRightComponent={LightBulbIcon}
    ></HorizontalCard>
  );
};

Expected result:

5. Adding UI to the "Settings" Route (Optional)

I wanted to use the settings route to test if I could support switching between light and dark modes with Expo Router.

Following the Expo Router docs, I learned about the component, which allows us to interact with the NavigationContainer (managed by Expo Router) to set things like "theme".

Let's customize the UI to add a switch that allows us to toggle dark mode:

// app/settings/index.js
import {
  Body,
  Box,
  HStack,
  LargeTitle,
  Switch,
  useColorModeValue,
  VStack,
  useColorMode,
  Button,
  Input,
  Subhead,
} from "@spirokit/core";
import { RootContainer } from "expo-router";
import { DarkTheme, LightTheme } from "@react-navigation/native";
import { LogoutIcon, UserIcon, LinkIcon } from "react-native-heroicons/outline";

export default function Settings() {
  const { toggleColorMode, colorMode } = useColorMode();

  return (
    <Box flex={1}>
      {/* I'm using the global colorMode prop provided by SpiroKit to dinamically set the theme */}
      <RootContainer theme={colorMode === "light" ? LightTheme : DarkTheme} />
      {/* Header */}
      <Box
        safeAreaTop
        justifyContent={"flex-end"}
        padding={4}
        {/* I'm using the `useColorModeValue` hook provided by SpiroKit to set different colors for light and dark mode */}
        backgroundColor={useColorModeValue("primary.500", "primary.300")}
        minHeight={32}
      >
        <LargeTitle color={useColorModeValue("white", "primaryGray.900")}>
          Settings
        </LargeTitle>
      </Box>

      {/* Body */}
      <Box
        flex={1}
        backgroundColor={useColorModeValue("white", "primaryDark.1")}
        padding={4}
      >
        <VStack space={4} flex={1}>
          <HStack justifyContent={"space-between"} alignItems="center">
            <Body flex={1}>Dark mode</Body>
            <Switch onValueChange={toggleColorMode}></Switch>
          </HStack>
          <Input
            IconLeftComponent={UserIcon}
            LabelComponent={<Subhead>Name</Subhead>}
            defaultValue="Mauro"
          ></Input>
          <Input
            IconLeftComponent={UserIcon}
            LabelComponent={<Subhead>Lastname</Subhead>}
            defaultValue="Garcia"
          ></Input>
          <Input
            IconLeftComponent={LinkIcon}
            isDisabled
            LabelComponent={<Subhead>Twitter handle</Subhead>}
            defaultValue="https://www.twitter.com/mauro_codes"
          ></Input>
        </VStack>

        <Button IconLeftComponent={LogoutIcon}>Logout</Button>
      </Box>
    </Box>
  );
}

If everything goes well, we should now be able to toggle between light and dark mode

6. Adding a dynamic route for the news details screen

From the Expo docs:

"Dynamic routes match any unmatched path at a given segment level. For example, /blog/[id] is a dynamic route. The variable part ([id]) is called a "slug"."

We are going to use this pattern to navigate from the "news" route to the news details ("news"/[id]).

Remember, Expo Router is based on your file system, so let's start by creating a new file for this dynamic route:

touch ./app/news/[id].js

Inside our new [id].js file, let's add some UI and see how we can access the id param.

Given this is a demo, I'm using hardcoded data. In real life, we would use the id from the URL to request the information using fetch or axios.

import { useLink } from "expo-router";
import { Platform, ScrollView } from "react-native";
import {
  Avatar,
  Subhead,
  Image,
  Box,
  VStack,
  HStack,
  LargeTitle,
  useColorModeValue,
  ZStack,
  Body,
  Button,
} from "@spirokit/core";
import { ChevronLeftIcon } from "react-native-heroicons/outline";

export default function NewsDetails({ route }) {
  // Extracting the id param from the route
  const id = route.params.id;

  // This should be replaced by real data coming from an external API
  const content = loremIpsum;

  return (
    <Box flex={1} backgroundColor={useColorModeValue("white", "primaryDark.1")}>
      <Header></Header>
      <ScrollView>
        <VStack space={4} flex={1} padding={4}>
          <Body>{content}</Body>
        </VStack>
      </ScrollView>
    </Box>
  );
}

const Header = () => {
  const link = useLink();

  return (
    <>
      <ZStack minHeight={56} overflow="hidden" width="full">
        <Image
          height={56}
          width="full"
          resizeMode="cover"
          source={{ uri: "https://i.imgur.com/1lSpdz3.png" }}
          alt="Image of a ship"
        ></Image>
        <VStack
          justifyContent={"space-between"}
          backgroundColor={"black:alpha.40"}
          padding={4}
          width="full"
          height={"full"}
        >
          {Platform.OS === "web" ? (
            <Button
              size="sm"
              width="auto"
              alignSelf={"flex-start"}
              onPress={() => link.back()}
              IconLeftComponent={ChevronLeftIcon}
            ></Button>
          ) : null}
          <LargeTitle numberOfLines={3} color={"white"}>
            Resting place of Australia's last convict ship
          </LargeTitle>
        </VStack>
      </ZStack>
      <AuthorLine></AuthorLine>
    </>
  );
};

const AuthorLine = () => {
  return (
    <HStack
      padding={4}
      justifyContent={"space-between"}
      alignItems={"center"}
      space={4}
    >
      <HStack space={4} flex={1} alignItems="center">
        <Avatar
          size={"sm"}
          alt="Siv Marko profile image"
          source={{ uri: "https://i.imgur.com/pfR8Ytj.png" }}
        ></Avatar>
        <Body>Siv Marko</Body>
      </HStack>
      <Subhead flex={1} textAlign="right">
        15th June 2021
      </Subhead>
    </HStack>
  );
};

const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit faucibus justo, at eleifend sapien pellentesque ut. Curabitur ultrices eget arcu sit amet luctus. Mauris accumsan ut mauris eget pharetra. Quisque dignissim sed leo sed condimentum. Nullam ligula nisi, pellentesque sit amet lacus eget, malesuada tempus lorem. Pellentesque fringilla erat a faucibus semper. Sed posuere tristique vulputate.

Nam convallis tempor dictum. Donec maximus nisl a tempor condimentum. Fusce egestas velit id ante consectetur feugiat. Nam non ligula metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce efficitur tellus leo, non vehicula lorem ornare id. Vivamus enim mauris, volutpat ut luctus semper, hendrerit eu dolor. Nunc a sapien ac ex tempus tempor. Cras odio augue, porta vitae venenatis id, sagittis at tortor. Etiam id tristique tortor, in eleifend dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`;

If you reload your app, you should now be able to navigate to the news details screen.

Note that you didn't have to add any additional configuration to use this last route. Given that we already setup the stack navigator for the "news" directory, every child automatically becomes a valid route ✨✨

Conclusion

Congrats! If you are still here, you managed to build a small app that leverages a few of the available features on Expo Router.
This is just the beginning. We are in the early days of this library, so everything is changing really fast.
If you enjoyed this article, don't hesitate to leave a comment or reach out to me on Twitter. My DM's are always open.

I would love to hear your thoughts!
Happy coding!

Expo 101: Building mobile apps in weeks, not years

Mauro Garcia — Thu, 17 Feb 2022 11:11:55 +0000

Mobile app development used to be painful.
In this post, I talk about how Expo changed that forever.

At the end of this post, you'll get a solid understanding of the entire Expo ecosystem, and you'll be able to create your first app, add some features, build it in the cloud, and submit it for review in the stores.

A little bit of history
- Working on mobile was a pain
- Code reusability
- Signing and certificates
- iOS development: a luxury for a few
- Slow feedback loop
- Hybrid app development
What is Expo?
- Workflows
- Bare workflow
- Managed workflow
- Expo ecosystem
- Expo CLI
- Expo Dev Tools
- Expo Snack
- Expo Application Services (EAS)
- Over the air updates
- Expo SDK
I'm sold! Where should I start?
- Bootstrapping a new project
- Running your project on a real device
- Making changes in real-time with Expo Go
- Adding new functionality using the Expo SDK
- Building an app with Expo Application Services
- Submitting your app to the store
Conclusions
Shameless plug

A little bit of history

At the beginning of time, Mobile app development used to be quite complex.

It required you to learn how to use new tools and programming languages and deal with a whole new range of problems (don't let me start on publishing and signing).

Documentation was scarce (and I'm being generous), and if you got stuck with an issue, your previous knowledge about web development was not instantly transferable.

In other words, it was an entirely new world to discover (and tame)

Working on mobile was a pain

The development experience used to be awful. Here are the main reasons that come to mind:

Code reusability

Before hybrid app development was a thing, you needed to build two entirely different apps to support Android and iOS.

In other words, zero code reusability, and it was twice as challenging to maintain your app.

Signing and certificates

The signing process was tedious and entirely different for each platform.

If you were unlucky enough to have to deal with certificates in iOS, you would know it is a nightmare. Furthermore, certificates expire, meaning that you had to manually keep an eye on them to prevent issues.

iOS development: a luxury for a few

If you wanted to build an iOS app, you needed a mac before starting.

You could think this is not a big deal, especially if you live in a developed country. However, here in Argentina, the story is quite different. I can tell you I didn't know anyone with a mac in my entire childhood.

Nowadays, it's way more common to see developers using a mac, but 10 years ago, it wasn't that common. So, iOS development was something restricted for those who could afford it.

Slow feedback loop

With modern web development, we have instant feedback of our changes thanks to things like "hot reload": You make a change, and you immediately know if you screw something or if your change introduced a new bug.

Moreover, web apps are easy to test in different scenarios.

On native mobile development, you had to recompile the entire app after each change, and if you wanted to test your app on different devices, you had to publish it through the Store (at least in iOS).

As an alternative, you could use emulators, but it was slow as hell, and sometimes it didn't reflect reality.

Hybrid app development

Frameworks like Xamarin, Ionic, Apache Cordova, and PhoneGap appeared in 2011 (Xamarin was the first one). React Native came later in 2015.

It was a big thing, and those new frameworks helped improve the development experience a lot. Now, you could reuse part of your previous knowledge as a web developer to work on mobile, and, in some cases, you could build an entire app without dealing with native specific code at all.

Yet, compiling and publishing still was a pain, and you needed a mac for iOS. In addition, documentation was still poor, and performance comparison between a native app and a hybrid app was always discussed.

As an evolution for hybrid frameworks, Expo appeared a few years ago.

What is Expo?

Expo is a Framework that allows you to build a React Native project that runs natively on any platform or device.

What is fantastic about Expo is that it allows you to instantly run your app using Expo Go, an app you can install on your Android or iOS device.

In other words, you don't need to have a mac or to install anything on your PC besides Node. In fact, my primary workstation is running Linux, and I've been working with Expo for years without problems.

You have instant feedback thanks to Expo Go, which includes hot reload and keeps track of your current screen state.

Expo is also an ecosystem that includes a set of tools and services that drastically improves your development experience by taking care of annoying things like building, signing, and publishing your apps.

Workflows

When building an app with Expo, you can use two different workflows. Both provide a very different experience and cover two totally different requirements.

Bare workflow

This workflow is only recommended when you need absolute control over the native code of your app.

I can only recommend using it if you know you'll need to work with native packages not included in the Expo SDK or have a config plugin to work with Expo.

Keep in mind that, by using this workflow, you will need to handle all the complexity associated with the native code for each platform.

Managed workflow

You build your app only using JavaScript or Typescript.
You don't have to deal with native code at all.
Expo handles building, signing, and publishing using different tools and services like Expo CLI or Expo Application Services (EAS)

This mode has its own limitations: Only packages included in the Expo SDK or native packages that include a config plugin will work with this workflow.

This could sound like a huge roadblock, but most packages work with this workflow nowadays.

Furthermore, Expo has been working on new features like custom development clients and config plugins to allow developers to adapt more and more libraries so you can use them with Expo.

If you are starting to work on a new project today, I highly recommend using the managed workflow. The Expo team is using all their energy to improve this workflow every day, and I've been using it for almost two years now, and I didn't find any significant limitations yet.

Expo ecosystem

Expo CLI

The Expo CLI is the interface between you (the developer) and the Expo ecosystem. You can use it for many different things, but if I had to mention the most important ones, I would say:

Bootstrap new projects
Run your expo project using Expo Go or Emulators.
Install new packages from the expo SDK (More about this below)
Upgrade your project SDK version.
Build and sign your app (Only managed workflow). This service is known as the classic build service.
Send Over-the-air updates (More about this below)

If you want to install the Expo CLI tool, just run the following command

npm install -g expo-cli

Expo Dev Tools

Expo Dev Tools is a web browser-based control panel included in Expo CLI. With Expo Dev tools, you can:

View logs from supporting services (Metro and Webpack bundlers)
View logs from your device
Scan a QR Code from Expo Go to quickly launch your app.
Debug connectivity

This control panel will be opened every time you run the expo start command.

Expo Snack

Expo Snack is an open-source platform for running React Native apps in the browser.
It handles compilation and bundling for you and allows you to run your app with Expo Go or in a web simulator.
You can easily save a piece of code as a "Snack" and share it with others.

Here's an example of a Snack a created for this post

Expo Application Services (EAS)

Expo Application Services (EAS) is a set of cloud services that allows you to quickly build, sign and publish your app in the stores.

I can't recommend it enough! Since day one, I've been using this service when it was in beta, and it has saved me hundreds of hours of pain.

It's divided into three different features:

EAS Build: Compile and sign Android/iOS apps with custom native code in the cloud. Learn more
EAS Submit: Upload your app to the Apple App Store or Google Play Store from the cloud with one CLI command. Learn more
EAS Update (preview): Address small bugs and push quick fixes directly to end-users without dealing with the tedious process of submitting your app for review. Learn more

Over the air updates

Over-the-air updates allow your app to receive updates without submitting and waiting for ages until Apple and Google review each change you made. These updates include your app's JavaScript and assets.

This feature has a few limitations: If you need to add new native packages or update your SDK version, you will need to rebuild and submit.

But for the daily patches and hotfixes, it will save you tons of hours, and more importantly, allow you to instantly respond to bugs in production.

Expo SDK

The Expo SDK works like an extension of the React Native core package, and when I say extension, I'm not talking about only a few additional features.

At the moment of this writing, the Expo SDK includes at least 100 packages. I would like to share a few examples of packages I use every day and save me tons of hours of work:

expo-firebase-analytics: Enables the use of native Google Analytics for Firebase.
expo-file-system: Provides access to a file system stored locally on the device. It also allows you to download and upload files from network URLs.
expo-document-picker and expo-image-picker: Provide access to the system's UI for selecting images, videos and documents.
expo-localization: Allows you to localize your app, customizing the experience for specific regions or languages.
expo-linking: Easily setup deep linking both with a custom scheme or using HTTPS.
expo-device: Provides access to system information about the physical device, such as its manufacturer and model.
expo-font: Allows loading fonts from the web and using them in React Native components. See more detailed usage information in the Fonts guide.

I'm sold! Where should I start?

I already mentioned a lot of different tools and services, and it could be a little bit daunting at first.

I'll show you how to combine all these tools in a project.

Bootstrapping a new project

Let's start by installing the Expo CLI globally on your machine by running the following command on your terminal

npm install -g expo-cli

Now, we can create a new Expo project like this

expo init

You can use the optional flag --yarn if you prefer yarn over npm

The Expo CLI will ask you your project's name, which template you want to use, and a few more preferences.

Running your project on a real device

After the expo init finished, cd into your new project and run the npm start command. This will run expo start behind the scenes.

This will start a local server for your app, opening your web browser with the control panel.

Go to your Android or iOS device, and install Expo Go from the store.

Open Expo Go on your phone, and scan the QR code available in the web control panel.

Wait until your phone finishes downloading all the js files, and that's it! Your first app is already running on your phone.

Making changes in real-time with Expo Go

With your app still running on your phone, go to your App.js or App.tsx file and make a small change like this one:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
+     <Text style={{ backgroundColor: "red", color: "white" }}>
+       This is a custom text with red background!
+     </Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Not hit save, and take a look at your phone.

Your changes are instantly available on your phone. Magic.

Adding new functionality using the Expo SDK

Let's say we want to grab a few details about the user device and show this data on a screen.

We will leverage the Expo SDK for that, and more specifically, we'll use the expo-device package mentioned above.

Using the Expo CLI again, run the following command on your terminal:

expo install expo-device

Now, go to your App.js or App.tsx file and add the following lines:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
+ import * as Device from "expo-device";

export default function App() {
  return (
    <View style={styles.container}>
-     <Text>Open up App.tsx to start working on your app!</Text>
+     <Text>Brand: {Device.brand}</Text>
+     <Text>Manufacturer: {Device.manufacturer}</Text>
+     <Text>Model name: {Device.modelName}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

If everything went as expected, you should see something like this on your phone:

Congrats! You integrated your first package from the Expo SDK into your project.

As I mentioned above, there are 100+ packages available in the Expo SDK, which means you can unlock unlimited potential for your next project in minutes.

Building an app with Expo Application Services

Our handy app that shows information about your device is ready.
The next step is to generate a build and try our app without Expo Go.

We are going to leverage Expo Application Services for that.

To use EAS, you will need to install the eas-cli package globally. Go to your terminal and run the following command.

npm install -g eas-cli

Visit https://expo.dev and Sign up to start using EAS. The free plan already includes everything you need if you are an indie hacker working on your own apps.
Once you have created your account, go to the terminal and login using the eas login command.
Still in the terminal, navigate to your project's directory and run the eas build:configure command to configure your project to run on EAS build. Please follow this link if you want to learn more about this. After finishing this configuration. You will get a new eas.json file in the root directory of your current project.
Go to your app.json file and configure your android.package and ios.bundleIdentifier props. EAS will prompt you to specify them.
If you are using iOS, you will need to register your iPhone device first. This will only take you a minute. Run the eas device:create command and follow the instructions. You will get a link to open on your phone and install a required certificate.
Run the eas build --profile development --platform android or eas build --profile development --platform ios to generate your first build in the cloud. Expo will handle all the heavy lifting for you by creating the required certificates, signing your app for you, and starting building your app in the cloud. You'll get a link where you can follow the progress of your build.
After finishing building, you can download the apk (if you targeted Android) or copy the link to install your app on iOS. ## Submitting your app to the store After building and testing your app to check that everything is working as expected, we are ready to submit.

Again, EAS will handle this for you. Just run the eas submit --platform [Your platform].

EAS will use your latest build for the submission by default, but you can manually specify a previous build if you want. To learn more about the available options, run the eas submit --help command.

Conclusions

Congrats! If everything went as expected, your app was already submitted 🥳️ .
What I love about the Expo ecosystem is that you get a tool for each stage of your project:

Do you need to create a new project or add Expo to an existing React Native app? You can use Expo-CLI for that.
Do you need to add new features to your app? You have 100+ packages already included in the Expo SDK.
Do you need to build and sign your app? Use EAS Build
Ready to submit? EAS Submit got your back.
Do you need to quickly fix an error in production? EAS Update allows you to push your js changes without submitting your app again.

Shameless plug

Last year I released my own design system. It's called SpiroKit
If you need a UI kit to prototype your next app, you can use SpiroKit's Figma template.

I'm currently building the React Native UI library for SpiroKit, so If you want to learn more about it, follow me on Twitter, when I'm building everything in public, sharing weekly updates about the project.

Adding Storybook to your Expo project

Mauro Garcia — Thu, 07 Oct 2021 18:31:59 +0000

Imagine having a web portal to showcase, document, test, and improve all your React Native components. A place where you can build your own library over time and then use that library to quickly build and release all those app ideas you have.

If that sounds appealing to you, you'll love Storybook.

In this post, I'll talk about what Storybook is, how it can help you, and how to add it to your Expo project.

What is Storybook, and how can it help you?

Storybook is an open-source tool for building UI components and pages in isolation. In other words, it's a library you can add to your project to test and document your components.

Are you still confused? No worries. I had to read the official documentation and search for real-life examples before genuinely understanding how powerful this tool is. So, follow me with this basic example.

Let's say we have a simple component called "Hero." It receives the following props:

Title
ButtonText
OnButtonPress

The code for that component will look like this:

import React from "react"
import { Button, StyleSheet, Text, View } from "react-native"

type HeroProps = {
    title: string
    buttonText: string
    onButtonPress: () => void
}

const Hero: React.FC<HeroProps> = (props) => {
    const { title, buttonText, onButtonPress } = props

    return (
        <View>
            <Text style={styles.title}></Text>
            <Button title={buttonText} onPress={onButtonPress}></Button>
        </View>
    )
}

const styles = StyleSheet.create({
    title: {
        fontSize: 32,
        marginBottom: 10,
        textAlign: "center"
    }
})

export default Hero

I'm using TypeScript for all the code examples on this article, but you can use Storybook with plain js too.

If we want to reference this component on your React Native app, we will use it like this:

<Hero
    title="Welcome to my App"
    buttonText="Sign in"
    onButtonPress={() => Alert.alert("Signed in")}>
</Hero>

And f we run the app, we should see something like this:

If you are working for a company, chances are that you'll have to communicate how your new component works to the rest of the team.

Besides, your teammates must know that your Hero component exists to avoid code duplication.

Last but not least, you will need to test your component with different props combinations to make sure everything works as expected. For example, what happens if we use a really long text for our button? Is our component responsive?

Storybook is the solution for all the problems I mentioned before. It help's you build a centralized component library with rich and interactive documentation so your teammates can reuse it or even improve it.

Here's an example of how a storybook portal will look like with our Hero component:

As you can see, you can change the value of any prop in real-time, read the autogenerated documentation (which can be manually improved), and copy an example of the code required to use the component.

Storybook also lets you create "Stories," which represent different states for the same component.

If we now add a new prop to our component called "hideButton," we should create a new story to see how the component looks like with and without the button:

Setup options

There are three main ways to use Storybook with Expo. Based on what you choose, the installation process will be different.

Storybook 100% Web

This is my favorite setup. You work on your React Native components as usual and reference those components as Stories that can be rendered directly into the browser.

Pros

You can publish your Storybook web portal and share it with your teammates. Everyone can access the documentation and play with the components without having to install anything.

Cons

Any native component like a Date time picker won't be rendered. For those components, you will need to use the other methods described below.

Storybook Hybrid

With this setup, you still get a web portal, but it uses web sockets to connect to a native device. The documentation for the components still is presented on the web, but the rendering of the components will require an actual device connected.

Pros

You don't have any limitations to render native components like Date Time Picker because everything runs on your phone.

Cons

The documentation is not easy to share or consume by the rest of the team. Because the web portal is searching for a device to connect with, you won't see the documentation until everything is wired up with a device.

Storybook 100% native

With this setup, you replace the entry point of your React Native app with the Storybook UI. Everything is presented directly within your phone.

Pros

Same as the hybrid approach.
It could be helpful if you want to make an app to showcase your component library.

Cons

Reading documentation directly from your phone is not the best option if you want to promote collaboration within your team. Having a web interface is always better for developers who will spend hours a day working with a design system.

Installation

I'll focus this guide on the first setup, but please send a DM through my Twitter if you want me to cover the other available options.

To use Storybook, we'll need an existing Expo project. If you already have a project, you can skip the first step.

1. Creating a new expo project

Create a new Expo project, choose a template and a name for your project

expo init

You'll need to install the Expo CLI globally: npm i -g expo-cli: npm i -g expo-cli

2. Adding Storybook

Navigate to your new project root directory and run the following command to add Storybook

npx -p @storybook/cli sb init --type react

Once the installation is complete, you'll see two new directories on your project:

.storybook
- Here is where your storybook configuration files will live. You can customize the Storybook UI using a custom theme or by adding plugins. > I'll cover all the customization options in another post.
stories
- Here is where you'll add all the stories you need to test each component. This is the best place to mock dependencies or add any required Provider. Besides, you can augment the component documentation and add custom pages if needed.

3. Adding your first stories

The basic installation already includes a few stories that serve as an example. However, if you want to learn more about stories, here is the official documentation.

Let's add two stories for our "Hero" component. The button will only be visible in the first story.

Add a new file called Hero.stories.tsx or Hero.stories.jsx with the following code:

import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import Hero from "../src/components/Hero";
import { Alert } from "react-native";

export default {
  title: "Example/Hero",
  component: Hero,
} as ComponentMeta<typeof Hero>;

const Template: ComponentStory<typeof Hero> = (args) => <Hero {...args} />;

export const WithButton = Template.bind({});

WithButton.storyName = "With button";
WithButton.args = {
  title: "Welcome to my App",
  buttonText: "Sign in",
  hideButton: false,
  onButtonPress: () => Alert.alert("Signed in"),
};

export const WithoutButton = Template.bind({});

WithoutButton.storyName = "Without button";
WithoutButton.args = {
  title: "Welcome to my App",
  buttonText: "Sign in",
  hideButton: true,
  onButtonPress: () => Alert.alert("Signed in"),
};

Finally, run the yarn storybook, or npm run storybook command to start your Storybook server and test your stories. If you want to customize your existing stories or add new ones, Storybook comes with hot reload by default, so you'll instantly see any change after saving.

In upcoming posts, I will talk more about Storybook UI customization and how you can improve your stories and docs.

If you don't want to miss these series, follow me on Twitter

Also, I'm currently working on a Design System called SpiroKit. You can pre-purchase the Figma file + the React Native library with a 50% discount using the code "HUNT" for a limited time.

Presenting TypeIt: A VSCode extension for content creators

Mauro Garcia — Mon, 12 Apr 2021 16:43:41 +0000

Today I wanted to share with you a side-project I've been working on with @paulasantamaria .

It's called TypeIt: Typing animations for content creators

TypeIt is a VSCode extension that retypes your code so you can record it.

Why TypeIt?

Sometimes we just want to write code at our own pace, test it, and, once we are comfortable, share it online as code snippets or tutorials. We may not want to memorize and write the code all over again just to record it. That's when TypeIt comes in. Use it to automatically retype the code you want to share.

Plus, you can choose different modes, adjust the typing speed and even retype multiple documents in parallel!

This video demonstrates how TypeIt can be used to create and share content:

More info

If you want to learn more about it, you can visit our website.

We would love to hear your thoughts 💬

What do you think about TypeIt?
Would you try it?
Let us know if you have any questions or feedback in the comments below👇

Building a React Native app from scratch: Project overview

Mauro Garcia — Thu, 18 Mar 2021 19:32:11 +0000

Do you want to learn what it takes to build a real app with React Native?⁣⁣⁣
⁣
Following my “Building a React Native app from scratch.”, I wanted to show you an overview of the whole project and tell you the story behind it.⁣

⁣

Storytime

Back in 2015, I had never been to a barbershop before in my entire life. After doing some research, I found a well-rated barbershop near my office in Buenos Aires, Argentina. I booked my appointment through an app that let me choose the barber. I randomly picked one, and that’s how I met @pepshc.⁣
⁣
Fast-forward to today, Andres (a.k.a “Pepe”) has not only been my barber for the last six years, but he has also become a great friend with a lot of projects in common.⁣
⁣
In 2020, Pepe decided to open his own Barbershop in Buenos Aires, and he called it “Formal.” and he recently asked me to help him build an app so their clients could book an appointment with him.⁣
⁣

Project Overview

I wanted to keep the app simple so that it could be released as soon as possible. That’s why I thought about the main problem I wanted to solve: Clients should be able to book new appointments with a few taps. They should also be able to cancel an appointment in case of not being able to attend.⁣

Sign in & Sign up

These screens will allow the users to sign in / sign up using email and password or using Facebook.

I'll have to set up Facebook authentication and test a few edge cases.⁣

Home⁣ & Forgot Password

My goal for this screen is to guide the user’s finger to the “New appointment” button. That’s why I decided to locate it at the bottom of the screen, where anyone can easily tap it.

Besides, users will have all the required information for their next appointment without navigating through different screens.

I’m still unsure if that card will disappear or show a message where the user doesn’t have any scheduled appointment.

Users will be able to reset their password using the “Forgot Password” and the “Reset Password” screens.
I'll have to deal with deep linking to redirect the user to the “Reset Password” screen once they tap the email’s link.⁣⁣

New appointment flow

I wanted to allow users to request a new appointment in six simple steps taps:⁣

Tap the “New appointment button” on the Home screen.⁣
Pick a service⁣.
Open the calendar⁣.
Pick a date⁣.
Pick an hour⁣.
Confirm reservation⁣.

To avoid unnecessary steps, I decided not to include any “Continue” button. The app will automatically navigate every time the user picks a service or hour.⁣

Appointment list⁣ & My account

The user will only visit this screen for two reasons: ⁣

To cancel an upcoming appointment⁣
To check when was the last time they got their haircut.⁣

That’s why I decided to include a text at the top of the screen indicating how many days have passed since their last appointment, and I located the upcoming.⁣

Besides, I located the upcoming appointment at the bottom, so they could easily cancel the appointment.⁣

Users will be able to change their personal information (like phone number, name, and birthday) and logout. For now, they won’t be able to change their emails to reduce the complexity of the app.⁣

In the next post, I’ll talk about the navigation and how I use react-navigation to set up my tab bar.⁣

If you want to dig deeper into the code, check out my GitHub repo:⁣⁣

mauro-codes / formal-booking

A React Native barber booking app

Let me know what you think

I’ll love to hear your thoughts about this project! Is there any specific topic you want me to tackle during the series? Let me know in the comments below.⁣

Building a React Native app from scratch

Mauro Garcia — Tue, 16 Mar 2021 11:04:10 +0000

Do you want to learn what it takes to build a real app with React Native?⁣⁣
Today I'm presenting a new series called "Building a React Native app from scratch."⁣⁣

⁣⁣

Scope of the series

You can find thousands of React Native step-by-step tutorials out there. That kind of content is highly focused on the how to do, but I decided to shift the focus of this series and talk more about the what and less about the how.⁣⁣
⁣⁣
Building a mobile application is not just writing code until it's finished. There are tons of things to think about and prepare before even opening your favorite IDE:⁣⁣

Build a prototype of each screen of your app.⁣⁣
Choose a color palette / icons / typography.⁣⁣
Design the navigation flow between each screen.⁣⁣
Identify reusable components / define a consistent naming for them.⁣⁣
Choose a standard nomenclature for methods, components, screens.⁣⁣ ⁣⁣

Besides, during and after development, you'll have to do things like:⁣⁣

Learn how to publish your app in the App Store and Google Play⁣⁣
Test your app using different configurations⁣⁣
Take screenshots using different sizes for each store.⁣⁣ ⁣⁣

In this series, I will share my process with you as I complete all these tasks one by one. In addition, I will add tips and recommendations for each step of the process.⁣⁣
⁣⁣
In the next post, I'll give you an overview of the whole project. There I'll talk about the story behind this project, and I'll dig deeper into the project's scope in terms of screens, features, etc.⁣⁣
⁣⁣
If you want to dig deeper into the code, check out my GitHub repo:⁣⁣

mauro-codes / formal-booking

A React Native barber booking app

⁣⁣

Let me know what you think

I'll love to hear your thoughts about this project! Is there any specific topic you want me to tackle during the series? Let me know in the comments below.

Switching to Arch Linux

Mauro Garcia — Tue, 23 Feb 2021 11:34:13 +0000

Full disclaimer

I don't hate Windows. It's a great operating system, and I've been using it for decades. And it's totally ok if you use it too. In fact, you may need to use Windows or Mac if your work depends on tools that are not available on Linux.

Even though I tried Linux many years ago, I always returned to Windows for different reasons (mostly work and gaming). But my desire to leave Windows behind has grown on me recently, mainly because I've been learning more about the free software movement (free as in freedom).

Like many of you, I want to get things done, and the idea of having to spend weeks learning how to use a new operating system didn't sound appealing to me. That's why I decided to change my point of view and see it as an occasional hobby.

💡 If you found this content valuable, you can follow me on Twitter and Instagram.

Early experiments

After dual-booting Windows 10 and Manjaro Linux, I started to spend a few hours a week doing small experiments within Manjaro. Three months later, and with a better understanding of both the operating system in general and the Linux terminal, I decided to try ArcoLinux and spend even more time on Linux.

Finding the right tools

My main concern when switching to Linux was not being able to do my job. I use a few tools every day (like Figma or Notion) that I thought could not be used on Linux. But after some research and experimentation, I managed to get all of those tools working.

So I decided to share a list of tools/projects/apps I found that enabled me to do my daily job with Linux. A few apps are not strictly required for my job, but they highly improved my experience and boosted my productivity.

i3 Window Manager

After doing some research, I learn that there are unlimited customization options for your desktop environment on Linux. You can use a full desktop environment like GNOME, KDE, Mate, Cinnamon, or you can use Window Managers.

Window Managers are only one of the many components of a desktop environment, and its objective is to control where elements appear on the display. Because I wanted to fully customize my setup (and get a deeper understanding of Linux), I decided to start using i3.

There are dozens of options out there (xmonad, qtile, dwm, Awesome, Openbox, etc.), but I stick with i3 because it's easy to customize.

I really love Window Managers because it allows you to move through different windows without leaving the keyboard. Once you get used to them, there is no going back.

I managed to set up i3 to work with different workspaces on each monitor and open certain apps like VSCode on a specific workspace. In that way, I always have my browser on my left monitor and my code editor on the right one.

To learn more about i3, follow this link

Feh

Feh is a lightweight and versatile image viewer. I'm using it to set up my wallpapers on my i3 config file. You may not need this tool if you're using a full desktop environment instead of a window manager like i3. If you want to learn more about Feh, follow this link

Polybar

I wanted to have a custom status bar for my i3 window manager, so after some research, I found Polybar. Polybar is a powerful open-source tool that aims to help users build beautiful and highly customizable status bars for their desktop environment.⁣⁣

Even though I'm an absolute noob to Polybar, I spend some time customizing my bar to look like this:

One of the things I love about Polybar is that it's modular. Meaning that there are tons of out-of-the-box modules you can add to your bar without prior scripting knowledge.⁣⁣ Besides, you can create your own module if you want, and the documentation for the out-of-the-box modules is fantastic.

To learn more about Polybar, follow this link

Flameshot

Flameshot is the best substitute for the Windows Snipping Tool. It's a powerful yet simple to use screenshot utility. Here you can see an example of how many things you can do with it.

If you want to learn more about Flameshot, follow this link

Vysor

I've been working a lot with React Native, and I needed reliable software that lets me cast my phone screen on my desktop environment to control my phone without having to deal with the touch keyboard. Besides, sometimes I need to show a demo of the apps I'm working on, so having the ability to run this tool on Linux was kind of a deal-breaker for me.

After doing some research, I managed to compile the app following the instructions available on GitHub.

Here's Vysor, running on my ArcoLinux and casting the screen of my Android Phone:

To learn more about Vysor, follow this link

Peek

There's a tool called ScreenToGif that I use a lot on Windows. It allows me to record animated gifs to share on social media quickly. Sadly, it's not available for Linux. Thankfully I found Peek.
Peek is a super simple-to-use gif/video recorder. It's not a general-purpose screencast app with extended features but instead focuses on the single task of creating small screencasts of an area of the screen.

Here's an example of a GIF generated using Peek.

To learn more about Peek, follow this link

OBS

Open Broadcaster Software (OBS) is a free and open-source, cross-platform streaming and recording program. If you're producing content for YouTube or streaming on Twitch, this program has pretty much everything you'll need to start. Follow this link to learn more about the project.

Alacritty (Terminal Emulator)

Alacritty is a modern terminal emulator that allows extensive configuration, and it's a GPU-Accelerated Terminal, so it is known for having a good performance. To learn more about Alacritty, follow this link.

Brave browser

I really love Brave. It's privacy-focused, it's open-source, and it pays you with crypto if you accept to see sponsored ads occasionally. Besides, it's based on Chromium, so the developer tools are excellent. You can learn more about Brave on its official website

Spotify

Even though you can't download Spotify for Linux from the official website, you can get Spotify using the Snap package management system. Just type snap install spotify on your terminal, and you're ready to go. Now you can listen to your favorite music on Linux.

Spotify-TUI

If you are into Terminal user interfaces like me, you'll really enjoy Spotify-TUI

Lotion (unofficial Notion app for Linux)

Lotion was an unexpected but cool surprise. I found this fantastic project on GitHub. It's super easy to install, and it just works!

Figma-Linux

Figma-Linux is an unofficial electron-based Figma desktop app for Linux. You can easily install it using the snap package management tool.

To learn more about the project, visit the GitHub repo

VSCode

There's no much to say here. VSCode is my favorite IDE, and it's multi-platform. So, if you're working with VSCode on Windows, just know that the Linux client has precisely the same features.
You can find more specific instruction for installation based on your Linux distribution here in the official VSCode documentation

Docker

Docker is my daily driver to work with things like MongoDB and SQL Server on Linux. Docker is multi-platform, and you can use it on Linux. If you heavily rely on Docker for your daily job, know that you won't find any limitations while using it on Linux.

Final thoughts

I wanted to share my experience in case you're thinking about trying Linux, but you're not sure if that time invested will pay off.
At least for me, Linux has improved my work experience by letting me customize every single piece of the environment. And that's enough for me to keep learning and tweaking.

Did you do your daily work on Linux? What's your favorite distro and why?

I would love to hear about your experience with other Window Managers, so let me know if you tried anyone besides i3.

5 Tips for effective meetings

Mauro Garcia — Fri, 12 Feb 2021 11:11:12 +0000

After listening to the last episode of the DevDiscuss podcast with @ben , @jess , and Andy Goodman, I decided to make a post talking about what I've learned.

By the way, if you want to listen to the full episode, follow this link.

Prepare your agenda

Having a well-prepared agenda is the single best predictor of a successful meeting. The agenda should cover all the things that have to be covered to prepare people to be effective. Besides, it would help if you didn't think about the agenda as a simple list of topics but as a strategic plan for the next hour of your life.

Here are a few tips for a well-prepared agenda:

Define the objective of the meeting.
Send invitations to all the participants 24 to 48 hours in advance to discuss who should be there and who doesn't.
Make a list of topics that should be handled during the meeting.
For each topic on the list, you may consider including:
- A notation to explain how the topic will be handled. You can use three kinds of interactions:
  - Information: Meaning you'll inform about something.
  - Discuss: Meaning that you’re going to bring up a topic here, and you'll ask for feedback.
  - Action: Meaning that this item will lead to an action (making a decision)
- The name of the person who'll handle or present that topic.
- The estimated duration for the item
You may include a "WW, DW, BW" (Who will do what by when) section at the end of the agenda. There you'll specify the responsible, the responsibility, and the deadline for each task.

Avoid voting; try "Gradients of Agreement."

The thing about voting to make a decision is that there'll always be winners and losers. If you lose, you'll feel like you didn't get what you wanted.

That's why you could consider using a technique called "Gradients of Agreement" to see where everyone is without making a decision. With this technique, each participant can choose between:

Endorse
Endorse with reservations
Abstain
Disagree, but don't block
Veto

⚠️

If you're faced with ambiguous support, meaning the participants are all over the scale in response to a decision, it could be a sign that the problem was poorly defined.

👎

If you're faced with meager support, meaning that although some team members are clustered towards endorsement, others are clustered in the low part of the scale (disagree or veto), you may consider slowing down and search for better ideas.

If you want to dig deeper into Gradients of Agreement, check out the following link

Think about the people

There are some basic rules as to what people expect from a meeting:

They want their time to be used constructively and efficiently.
They want to know what do they need to do to come prepared.
They want to be clear about what do you expect from them after the meeting as a follow-up.

Keep it short

Even though there are certain types of meetings that could last for hours, most of the time it's really hard to keep everyone's attention for more than 1 hour. This is especially true for online meetings.

Try to keep your meetings under 1 hour so everyone can contribute in the best possible way.

Listen to understand and don't speak just to be heard.

As a participant of the meeting, try to be a good listener:

Listen with the intent to understand, not to respond.
Try to speak up only if you have something to contribute.
Avoid speaking just to be heard or to leave your mark on the table.

Final thoughts

As a software developer, I attended thousands of meetings during the last ten years. I witnessed awful discussions and productive conversations.

I've met with people that like to use meetings as an excuse to take a break and with people that only call a meeting after an exhaustive preparation.

My experience tells me that meetings can be a game-changer tool if they're used properly. It's up to each organization to follow validated methods and make a clear and complete plan for each meeting to take full advantage of it.

Is there any good tip that I'm missing? Let me know in the comments below 👇

Linux Terminal: The Ultimate Cheat Sheet - Part 2

Mauro Garcia — Mon, 01 Feb 2021 11:04:36 +0000

This post is the second part of a series that will help you learn how to benefit from the Linux Terminal.
If you didn't see my first post, I highly recommend taking a look at it before continuing with this one:

Linux Terminal: The Ultimate Cheat Sheet

Mauro Garcia ・ Jan 25 '21

#linux #terminal #beginners

💡 If you found this content valuable, you can follow me on Twitter and Instagram.

TL;DR

Search with Grep
- Search for a string within a file ➜ grep [term-to-search] [source-file-to-search]
- Case Insensitive Search within a file ➜ grep -i [term-to-search] [source-file-to-search]
- Search for non-matching lines within a file ➜ grep -v [term-to-search] [source-file-to-search]
- Recursive search within a directory ➜ grep -r [term-to-search] [path-to-directory-to-search]
- Multiple searches within a file ➜ grep -E "[first-term-to-search|second-term-to-search]" [source-file-to-search]
- Count search results ➜ grep -c [term-to-search] [source-file-to-search]
- Showing the name of the matching files ➜ grep -l [term-to-search] [matching-files-to-search]
- Learn more about grep ➜ man grep

Pipes
- Piping commands ➜ [command 1] | [command 2] | [command n]
- Piping filtered search results into a new file ➜ ls | grep [term-to-filter] | cat > [path-to-new-file]/[name-for-new-file]
- Searching through your command history ➜ history | grep "[term-to-search]"

Permissions: Change file mode bits command (chmod)
- Add execute permission to everyone ➜ chmod a+x [name-of-the-file] or chmod +x [name-of-the-file]
- Remove execute permission to everyone ➜ chmod a-x [name-of-the-file] or chmod -x [name-of-the-file]
- Add execute permission to the owner ➜ chmod u+x [name-of-the-file]
- Remove write permission to others users ➜ chmod o-w [name-of-the-file]
- Add read permission to the group ➜ chmod g+r [name-of-the-file]
- Remove write and read permission to everyone ➜ chmod a-wr [name-of-the-file]
- Remove write and read permission to everyone for all the files in the current directory ➜ chmod a-wr *.*

Groups
- List all the available groups ➜ getent group
- List all the groups my account is assigned to ➜ groups
- Search for a specific group (using pipes) ➜ getent group | grep [group-name-to-search]
- Create a new group ➜ sudo groupadd [name-for-the-new-group]
- Add an existing user to a secondary group ➜ usermod -a -G [group-you-want-to-add-the-user-to] [user-name-to-add]

Ownership: Change file owner and group (chown)
- Change user ownership for a file ➜ sudo chown [new-owner-name] [file-to-change-ownership]
- Change user ownership for several files ➜ sudo chown [new-owner-name] [file-1-to-change-ownership] [file-n-to-change-ownership]
- Change user ownership for a directory ➜ sudo chown [new-owner-name] [directory-to-change-ownership]
- Recursively change user ownership for a directory and all it's files ➜ sudo chown -R [new-owner-name] [directory-to-change-ownership]
- Change group ownership for a file ➜ sudo chown :[new-group-name] [file-to-change-ownership]
- Change user and group ownership for a file ➜ sudo chown [new-owner-name]:[new-group-name] [file-to-change-ownership]

Shortcuts
- Search through your search history ➜ [CTRL] + r. Then type a few characters to find you command
- Paste previous lines ➜ [CTRL] + p
- Moves the cursor to the beginning of the line. ➜ [CTRL] + a
- Moves the cursor to the end of the line. ➜ [CTRL] + e
- Moves the cursor forward one character. ➜ [CTRL] + f
- Moves the cursor backward one character. ➜ [CTRL] + b
- Erases the complete line. ➜ [CTRL] + u
- Erases the last word typed. ➜ [CTRL] + w

Working with long files
- Print the last lines for a file ➜ tail [name-of-the-file]
- Print the last n lines for a file ➜ tail -n [number-of-lines] [name-of-the-file]
- Print the first lines for a file ➜ head [name-of-the-file]
- Print the first n lines for a file ➜ head -n [number-of-lines] [name-of-the-file]
- Page through a file ➜ less [name-of-the-file]

Global regular expression search (grep command)

The Linux grep command is a string and pattern matching utility that displays matching lines from multiple files.

Search for a string within a file

Type grep [term-to-search] [source-file-to-search] to search for a term within a file. You can optionally add the -n argument if you want to print the line number for each match

## List the content for the working directory
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
README.md  index.html  main.js  script.txt

## Print the content of the index.html file
mauro_codes@mauro-desktop:~/projects/landing-page$ cat index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>My Website</title>
  </head>

  <body>
    <script src="js/main.js"></script>
  </body>
</html>

## Search for "meta" within the index.html file using grep
mauro_codes@mauro-desktop:~/projects/landing-page$ grep meta index.html -n
4:    <meta charset="utf-8" />
5:    <meta http-equiv="x-ua-compatible" content="ie=edge" />
6:    <meta name="viewport" content="width=device-width, initial-scale=1" />

Case Insensitive Search within a file

Type grep -i [term-to-search] [source-file-to-search] to perform a case insensitive search:

## Print the content of the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ cat main.js
const sum = (num1, num2) => {
        return num1 + num2
}

// Call the Sum function
sum(10,4)

## Search for "sum" without ignoring case (we get 2 results)
mauro_codes@mauro-desktop:~/projects/landing-page$ grep sum main.js -n
1:const sum = (num1, num2) => {
6:sum(10,4)

## Search for "sum" using the ignore case argument (we get 3 results)
mauro_codes@mauro-desktop:~/projects/landing-page$ grep sum main.js -in
1:const sum = (num1, num2) => {
5:// Call the Sum function
6:sum(10,4)

Search for non-matching lines within a file

Type grep -v [term-to-search] [source-file-to-search] to get all the lines within a file that don't match with the term

## Print the content of the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ cat main.js
const sum = (num1, num2) => {
        return num1 + num2
}

// Call the Sum function
sum(10,4)

## Search for each line that doesn't include "sum" (case sensitive)
mauro_codes@mauro-desktop:~/projects/landing-page$ grep sum main.js -v
        return num1 + num2
}

// Call the Sum function

Recursive search within a directory

Type grep -r [term-to-search] [path-to-directory-to-search] to search through nested directories and subdirectories.

## List the content for the working directory
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
README.md  index.html  main.js  script.txt  temp

## Search recursively for "sum" within the current directory (including sub-directories)
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -r sum .
./index.html:    <p>Calling the sum function:<p>
./index.html:    <!-- TODO: Call the sum function and display the value -->
./main.js:const sum = (num1, num2) => {
./main.js:sum(10,4)
./temp/index.html:    <p>Calling the sum function:<p>
./temp/index.html:    <!-- TODO: Call the sum function and display the value -->

Multiple searches within a file

Type grep -E "[first-term-to-search|second-term-to-search]" [source-file-to-search] to search for multiple terms within a file

## Print the content of the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ cat main.js
const sum = (num1, num2) => {
        return num1 + num2
}

// Call the Sum function
sum(10,4)

const printMessage(message) {
        console.log(message)
}

// Call the printMessage function
printMessage("Hello world")

## Search for "sum" or "printMessage" within the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -E "sum|printMessage" main.js
const sum = (num1, num2) => {
sum(10,4)
const printMessage(message) {
// Call the printMessage function
printMessage("Hello world")

Count search results

Type grep -c [term-to-search] [source-file-to-search] to count how many times a search term appears in the file

## List the content for the working directory
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
README.md  index.html  main.js  script.txt  temp

## Count how many times "sum" appears on the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -c sum main.js
2

## Count how many times "sum" or "printMessage" appears on the main.js file 
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -c -E "sum|printMessage" main.js
5

## Recursive count to get how many times "sum" or "printMessage" appears in the current working directory
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -c -E -r "sum|printMessage" .
./index.html:2
./main.js:5
./README.md:0
./script.txt:0
./temp/index.html:2

Showing the name of the matching files

Type grep -l [term-to-search] [matching-files-to-search] to get a list of files that includes the search term

## List the content for the working directory
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
README.md  about.html  index.html  main.js  script.txt  temp

## Get a list of html files that contains "<h1>"
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -l "<h1>" *.html
index.html

## Get a list of html files that contains "<p>"
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -l "<p>" *.html
about.html
index.html

## Recursively get a list of files that contains "<p>" within the current directory
mauro_codes@mauro-desktop:~/projects/landing-page$ grep -l -r "<p>" .
./about.html
./index.html
./temp/index.html

Pipes

Pipes are among the most useful command-line features on Linux and allow you to perform complex operations by "piping" multiple operations together, which means that the output of each command within the pipe will serve as an input for the next command.

Piping filtered search results into a new file

Let's say I want to get a list of all my blog posts that have the word "svelte" within the title. And I want to write the full list on a new file called svelte-articles.txt.

We can use pipes to list all my articles, filter those that include "svelte" using grep, and save that filtered list on a new file.

## Check that my current working directory is the "posts" folder that includes all my posts
mauro_codes@mauro-desktop:~/projects/maurogarcia.dev/posts$ pwd
/home/mauro_codes/projects/maurogarcia.dev/posts

## Piping the list of posts with grep to check how many posts include the term "svelte" (I get five items)
mauro_codes@mauro-desktop:~/projects/maurogarcia.dev/posts$ ls | grep svelte
5

## Piping the list of post --> Filter svelte posts --> move the content to a new file using cat
mauro_codes@mauro-desktop:~/projects/maurogarcia.dev/posts$ ls | grep svelte | cat > /home/mauro_codes/projects/svelte-articles.txt

## Print the content of our new file
mauro_codes@mauro-desktop:~/projects/maurogarcia.dev/posts$ cat /home/mauro_codes/projects/svelte-articles.txt
-rw-r--r-- 1 mauro_codes mauro_codes 4.2K Jan 27 18:29 -5-things-i-love-about-svelte-.md
-rw-r--r-- 1 mauro_codes mauro_codes  11K Jan 27 18:29 angular-vs-svelte-card-component.md
-rw-r--r-- 1 mauro_codes mauro_codes 5.3K Jan 27 18:29 component-driven-development-with-svelte.md
-rw-r--r-- 1 mauro_codes mauro_codes 5.0K Jan 27 18:29 how-to-build-your-next-chrome-extension-with-svelte.md
-rw-r--r-- 1 mauro_codes mauro_codes 4.7K Jan 27 18:29 sapper-svelte-tailwindcss-boilerplate.md

Searching through your command history

You can use pipes to search through your command history using grep by typing history | grep "[term-to-search]"

Thanks to @bradnichol for suggesting this approach in my previous post!

## Searching for the term svelte on your command history
mauro_codes@mauro-desktop:~$ history | grep "svelte"
  415  ls | grep svelte
  416  ls | grep -C svelte
  417  ls | grep -c svelte
  418  ls | grep -c svelte |
  419  ls | grep -c svelte | cat
  420  ls | grep svelte | cat
  421  ls | grep svelte | cat > /home/mauro_codes/projects/svelte-articles.txt
  422  cat /home/mauro_codes/projects/svelte-articles.txt
  444  ls grep -c svelte
  445  ls | grep -c svelte
  446  cat /home/mauro_codes/projects/svelte-articles.txt
  448  history | grep "svelte"

Permissions: Change file mode bits command (chmod)

Changing permissions in Linux is an extensive topic that deserves its own post. But I decided to include a few examples that can come in handy.

You can use the chmod command to add or remove the read, write, and execute permissions to different users for one or more files.

As a reference, here is an example of how the permissions are displayed for each file or directory when we use ls lah

Add the execute permission to everyone

Type chmod a+x [name-of-the-file] or chmod +x [name-of-the-file] to add execute permission to everyone for a specific file

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---------- 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---------- 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Add execute permission to everyone in the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod +x main.js

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---------- 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Remove the execute permission to everyone

Type chmod a-x [name-of-the-file] or chmod -x [name-of-the-file] to remove execute permission to everyone for a specific file

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
-rwxrwxrwx 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Remove the execute permissions to everyone in the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod a-x main.js

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
-rw-rw-rw- 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Add the execute permission to the owner

Type chmod u+x [name-of-the-file] to add the execute permission only to the owner for a specific file

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---------- 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---------- 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Add the execute permissions only to the owner in the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod u+x main.js

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x------ 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---------- 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Remove write permission to other users

Type chmod o-w [name-of-the-file] to remove the write permission only to other users (not owner or group) for a specific file

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
-rwxrwxrwx 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Remove the write permission only to other users (not owner or group) in the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod o-w main.js

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
-rwxrwxr-x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Add read permission to the group

Type chmod g+r [name-of-the-file] to add read permission only to the group for a specific file

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---------- 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---------- 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Add the read permission only to the group in the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod g+r main.js

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
----r----- 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---------- 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Remove write and read permission to everyone

Type chmod a-wr [name-of-the-file] to remove write and read permissions to everyone for a specific file

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
-rwxrwxrwx 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Remove the write and read permission to everyone in the main.js file
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod a-wr main.js

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Remove write and read permission to everyone for multiple files

Type chmod a-wr *.* to remove the write and read permissions to everyone for all the files in the current working directory.

## Check file permissions
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
-rwxrwxrwx 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
-rwxrwxrwx 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Remove the write and read permissions to everyone for all the files in the current working directory
mauro_codes@mauro-desktop:~/projects/landing-page$ chmod a-wr *.*

## Check permissions again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Groups

List all the available groups

Type getent group to get a list including all the available groups in your system.

mauro_codes@mauro-desktop:~/projects/landing-page$ getent group
root:x:0:
daemon:x:1:
bin:x:2:
sys:x:3:
mauro_codes:x:1000:

List all the groups my account is assigned to

Type groups to get a list of all the groups you are part of.

## List all my groups
mauro_codes@mauro-desktop:~/projects/landing-page$ groups
mauro_codes adm dialout cdrom floppy sudo audio dip video plugdev netdev

Search for a specific group (using pipes)

Type getent group | grep [group-name-to-search] to search for a specific group using pipes.

## List all the groups that contains the term "mauro_codes"
mauro_codes@mauro-desktop:~/projects/landing-page$ getent group | grep "mauro_codes"
adm:x:4:syslog,mauro_codes
mauro_codes:x:1000:

## List all the groups that contains the term "root"
mauro_codes@mauro-desktop:~/projects/landing-page$ getent group | grep "root"
root:x:0:

Create a new group

Type sudo groupadd [name-for-the-new-group] to create a new group.

## Create a new group called "development"
mauro_codes@mauro-desktop:~/projects/landing-page$ sudo groupadd development

## Check if the new group was created
mauro_codes@mauro-desktop:~/projects/landing-page$ getent group | grep development
development:x:1001:

Add an existing user to a secondary group

Type usermod -a -G [group-you-want-to-add-the-user-to] [user-name-to-add] to add an existing user to a secondary group.

## Add mauro_codes to the secondary group "development"
mauro_codes@mauro-desktop:~/projects$ sudo usermod -a -G development mauro_codes

## Check changes
mauro_codes@mauro-desktop:~/projects$ getent group | grep "mauro"
adm:x:4:syslog,mauro_codes
dialout:x:20:mauro_codes
mauro_codes:x:1000:
development:x:1001:mauro_codes

Ownership: Change file owner and group (chown)

Change user ownership for a file

Type sudo chown [new-owner-name] [file-to-change-ownership] to change user ownership for a file.

## Check user ownership
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Change user ownership (the root user will be the owner of the main.js file)
mauro_codes@mauro-desktop:~/projects/landing-page$ sudo chown root main.js

## Check user ownership again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 root        mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Change user ownership for several files

Type sudo chown [new-owner-name] [file-1-to-change-ownership] [file-n-to-change-ownership] to change user ownership for several files at the same time.

## Check user ownership
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Change user ownership (the root user will be the owner of the main.js and script.txt files)
mauro_codes@mauro-desktop:~/projects/landing-page$ sudo chown root main.js script.txt

## Check user ownership again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 root        mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 root        mauro_codes  23 Jan 24 17:31 script.txt

Change user ownership for a directory

Type sudo chown [new-owner-name] [directory-to-change-ownership] to change the user ownership for a directory.

## Check directories user ownership
mauro_codes@mauro-desktop:~/projects$ ls -lah
total 4.0K
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 28 10:48 ..
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 landing-page
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 22 12:15 personal-blog

## Change user ownership (the root user will be the owner of the "landing-page" directory)
mauro_codes@mauro-desktop:~/projects$ sudo chown root ./landing-page/

## Check directories user ownership again
mauro_codes@mauro-desktop:~/projects$ ls -lah
total 4.0K
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 28 10:48 ..
drwxr-xr-x 1 root        mauro_codes 512 Jan 27 17:49 landing-page
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 22 12:15 personal-blog

Recursively change user ownership for a directory and all its files

Type sudo chown -R [new-owner-name] [directory-to-change-ownership] to recursively change the user ownership for a directory and all its files.

## Check files ownershop within the landing-page directory
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 root        mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 16:27 temp_dir

## Recursively change the user ownership (the root user will be the owner 
## of all the files and directories within the current directory)
mauro_codes@mauro-desktop:~/projects/landing-page$ sudo chown -R root .

## Check user ownership again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls -lah
total 0
drwxr-xr-x 1 root        mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 root        mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 root        mauro_codes  23 Jan 24 17:31 script.txt
drwxr-xr-x 1 root        mauro_codes 512 Jan 27 16:27 temp_dir

Change group ownership for a file

Type sudo chown :[new-group-name] [file-to-change-ownership] to change the group ownership for a file.

## Check group ownership
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Change group ownership (the main.js file will now have "development" as a group)
mauro_codes@mauro-desktop:~/projects/landing-page$ sudo chown :development main.js

## Check group ownership again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes development 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Change user and group ownership for a file

Type sudo chown [new-owner-name]:[new-group-name] [file-to-change-ownership] to change the user and the group ownership for a file at the same time.

## Check ownership
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 mauro_codes mauro_codes 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

## Change user and group ownership (the main.js file will now have "development" as a group and root as owner)
mauro_codes@mauro-desktop:~/projects/landing-page$ sudo chown root:development main.js

## Check ownership again
mauro_codes@mauro-desktop:~/projects/landing-page$ ls
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 17:49 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 27 20:00 ..
---x--x--x 1 root        development 206 Jan 27 16:36 main.js
---x--x--x 1 mauro_codes mauro_codes  23 Jan 24 17:31 script.txt

Shortcuts

Big shout-out to @bogkonstantin and @samuelabreu for letting me know about these commands I didn't know.

Search through your command history

In the previous post, we saw that we could get a full list of the latest commands we run by typing history. If you don't want to see the full list but search for a specific command quickly, type [CTRL] + r. You'll be asked to enter a few characters to get matching commands. You can iterate between those results by typing [CTRL] + r again.

Moving through your commands

There are a few shortcuts you can use to move through your commands:

Paste previous lines ➜ [CTRL] + p
Moves the cursor to the beginning of the line. ➜ [CTRL] + a
Moves the cursor to the end of the line. ➜ [CTRL] + e
Moves the cursor forward one character. ➜ [CTRL] + f
Moves the cursor backward one character. ➜ [CTRL] + b
Erases the complete line. ➜ [CTRL] + u
Erases the last word typed. ➜ [CTRL] + w

Working with long files

Print the last lines for a file ➜ tail [name-of-the-file]
Print the last n lines for a file ➜ tail -n [number-of-lines] [name-of-the-file]
Print the first lines for a file ➜ head [name-of-the-file]
Print the first n lines for a file ➜ head -n [number-of-lines] [name-of-the-file]
Page through a file ➜ less [name-of-the-file]

Let me know if you want me to cover any particular command on a final post!

Linux Terminal: The Ultimate Cheat Sheet

Mauro Garcia — Mon, 25 Jan 2021 12:11:38 +0000

If you're a Linux user, the Terminal is probably the most powerful tool you would ever have. But the thing about the Terminal is that you need to learn how to use it if you want to benefit from it.

For the last few months, I've been playing with the Terminal a lot, and I came up with a long list of useful commands that I use regularly. Please let me know if I missed something important so I can add it to future posts.

💡 If you found this content valuable, you can follow me on Twitter and Instagram.

TL;DR

Basic commands
- Zoom in ➜ [CTRL] + [+]
- Zoom out ➜ [CTRL] + [-]
- Print working directory ➜ pwd
- Clear the terminal ➜ [CTRL] + [l] or clear
- Assign an alias ➜ alias [alias-name]="[command-to-run]"
- Source a file ➜ source [name-of-the-file-to-read-and-execute]

Change directory command (cd)
- Move to a specific directory ➜ cd [name-of-your-directory]
- Move to the parent directory ➜ cd ..
- Move to the home directory ➜ cd or cd ~
- Move to the last directory yo were in ➜ cd -

List command (ls)
- List all visible files and directories ➜ ls
- List all files and directories (include hidden files) ➜ ls -a
- Long Listed Format ➜ ls -l
- Human Readable Format ➜ ls -lh
- Combining arguments: Human Readable Format + Hidden files ➜ ls -lah
- Learn more about the ls command ➜ man ls

Search
- Locate the binary for a program ➜ which [name-of-the-program]
- Locate the binary, source and user manual for a program ➜ whereis [name-of-the-program]
- Locate files and directories by name ➜ find [path-to-search] -iname [name-of-the-file-you-want-to-search]
  - Learn more about the find command ➜ man find
- Get a brief description for a command ➜ whatis [command-name]

History
- Get previous commands (one by one) ➜ Use the Up Arrow key ⬆️ to navigate your history
- Get previous commands (full list) ➜ history.
- Repeat commands from history (bang command) ➜ history ➜ ![number-of-the-command-to-repeat]
- Repeat last command (bang-bang command) ➜ !!

Working with files and directories
- Create a new file (without open it) ➜ touch [name-of-your-file]
- Create a new file using a text editor ➜ vim [name-of-your-file] or nano [name-of-your-file]
- Copy a file ➜ cp [source-path-of-your-file] [destination-path-for-your-file]
- Create a new directory ➜ mkdir [new-directory-name]
- Remove an empty directory ➜ rmdir [name-of-the-directory-you-want-to-remove]
- Remove command (rm)
  - Remove a file ➜ rm [name-of-your-file]
  - Remove a directory recursively (use with caution) ➜ rm -rf [name-of-your-directory]
- Concatenate command (cat)
  - View a single file ➜ cat [name-of-your-file]
  - View a single file including the line numbers ➜ cat -n [name-of-your-file]
  - Copy the content of one file to another file ➜ cat [filename-whose-contents-is-to-be-copied] > [destination-filename]
  - Learn more about the cat command ➜ man cat
- Move command (mv)
  - Move a file ➜ mv [source-path-of-your-file] [destination-path-for-your-file]
  - Rename a file ➜ mv [name-of-your-file] [new name-of-your-file]

Basic commands

Zoom in

Type [CTRL] + [+]

Zoom out

Type [CTRL] + [-]

pwd: Print Working Directory command

It prints the working directory path, starting from the root directory.

mauro_codes@DESKTOP-HIQ7662:~$ pwd
/home/mauro_codes

mauro_codes@DESKTOP-HIQ7662:~/projects$ pwd
/home/mauro_codes/projects

Clear command

Type clear or [CTRL] + [l] to clear the entire terminal screen and get a clean terminal to keep working.

Alias command

If you usually run a long command regularly and want to save time, you can assign a shorter alias for that command. Type alias [alias-name]="[command-to-run]" to assign a new alias:

## Running the ls command
mauro_codes@DESKTOP-HIQ7662:~$ ls
projects

## Assign an alias, so we don't need to add the arguments every time we need to list something
mauro_codes@DESKTOP-HIQ7662:~$ alias ls="ls -lah"

## Running ls again (we get the result of `ls -lah`)
mauro_codes@DESKTOP-HIQ7662:~$ ls
total 16K
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 17:41 .
drwxr-xr-x 1 root        root         512 Jan 22 10:38 ..
-rw------- 1 mauro_codes mauro_codes 3.0K Jan 22 23:58 .bash_history
-rw-r--r-- 1 mauro_codes mauro_codes  220 Jan 22 10:38 .bash_logout
-rw-r--r-- 1 mauro_codes mauro_codes 3.7K Jan 22 17:32 .bashrc
-rw-r--r-- 1 mauro_codes mauro_codes  807 Jan 22 10:38 .profile
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 projects

Note that this alias won't be persisted for future uses. If you want to persist your aliases, add them at the end of your .bashrc file located in your home directory.

Source a file

You can use the source command to read and execute the content of a file line by line. Type source [name-of-the-file-to-read-and-execute]:

## Print the content of the script.txt file (contains two commands)
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cat script.txt
echo "hello world" ## Print a hello message
cal                ## Print a calendar

## Source the script.txt to run each command inside
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ source script.txt
hello world

    January 2021
Su Mo Tu We Th Fr Sa
                1  2
 3  4  5  6  7  8  9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

Change Directory command (cd)

Move to a specific directory

Type cd [name-of-your-directory]:

## Check current directory
mauro_codes@DESKTOP-HIQ7662:~$ pwd
/home/mauro_codes

## Change directory
mauro_codes@DESKTOP-HIQ7662:~$ cd projects/

## Check new working directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ pwd
/home/mauro_codes/projects

Move to the parent directory

Type cd ..:

## Check current directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ pwd
/home/mauro_codes/projects

## Move to the parent directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ cd ..

## Check new working directory
mauro_codes@DESKTOP-HIQ7662:~$ pwd
/home/mauro_codes

Move to the home directory

Type cd ~ or just cd as an alternative

## Check current directory
mauro_codes@DESKTOP-HIQ7662:~/projects/awesome-app$ pwd
/home/mauro_codes/projects/awesome-app

## Move to the home directory
mauro_codes@DESKTOP-HIQ7662:~/projects/awesome-app$ cd ~

## Check new working directory
mauro_codes@DESKTOP-HIQ7662:~$ pwd
/home/mauro_codes

Move to the last directory you were in

Type cd - to navigate to the previous directory you were in

## Check the current directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ pwd
/home/mauro_codes/projects/landing-page

## Move to another directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cd /home/mauro_codes/

## Check the new directory
mauro_codes@DESKTOP-HIQ7662:~$ pwd
/home/mauro_codes

## Go back to the previus directory you were in
mauro_codes@DESKTOP-HIQ7662:~$ cd -
/home/mauro_codes/projects/landing-page

List command (ls)

Lists the content of the directory you're currently in.

List all visible files and directories

Type ls without any additional argument to get all the files and directories (this command will exclude hidden files like the dotfiles).

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ pwd
/home/mauro_codes/projects

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ ls
awesome-app  landing-page  nextjs-tailwindcss-blog-starter  personal-blog

List all files and directories

Type ls -a to get all the files and directories (including the hidden files)

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ pwd
/home/mauro_codes/projects

## List the content for the working directory (including hidden files)
mauro_codes@DESKTOP-HIQ7662:~/projects$ ls -a
.  ..  .config  .configu  awesome-app  landing-page  nextjs-tailwindcss-blog-starter  personal-blog

Long Listed Format

Type ls -l to get all the visible files and directories including additional metadata like permissions, owner, size and modified date and time.

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/nextjs-tailwindcss-blog-starter$ pwd
/home/mauro_codes/projects/nextjs-tailwindcss-blog-starter

## List the content for the working directory (using the long listed format)
mauro_codes@DESKTOP-HIQ7662:~/projects/nextjs-tailwindcss-blog-starter$ ls -l
total 140
-rw-r--r-- 1 mauro_codes mauro_codes   4487 Jan 22 12:55 README.md
drwxr-xr-x 1 mauro_codes mauro_codes    512 Jan 22 12:55 components
-rw-r--r-- 1 mauro_codes mauro_codes   1068 Jan 22 12:55 config.ts
drwxr-xr-x 1 mauro_codes mauro_codes    512 Jan 22 12:55 helpers

Human Readable Format

Type ls -lh to get all the visible files and directories in long-listed format, but with a Human Readable Format (User-friendly file size).

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/nextjs-tailwindcss-blog-starter$ pwd
/home/mauro_codes/projects/nextjs-tailwindcss-blog-starter

## List the content for the working directory (using the long listed format + human readable format)
mauro_codes@DESKTOP-HIQ7662:~/projects/nextjs-tailwindcss-blog-starter$ ls -lh
total 140K
-rw-r--r-- 1 mauro_codes mauro_codes 4.4K Jan 22 12:55 README.md
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 components
-rw-r--r-- 1 mauro_codes mauro_codes 1.1K Jan 22 12:55 config.ts
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 helpers

Combining arguments

Type ls -lah to get all the files and directories (including hidden files) in Human Readable Format.

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/nextjs-tailwindcss-blog-starter$ pwd
/home/mauro_codes/projects/nextjs-tailwindcss-blog-starter

## List the content for the working directory (include hidden files + human readable format)
mauro_codes@DESKTOP-HIQ7662:~/projects/nextjs-tailwindcss-blog-starter$ ls -lah
total 140K
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 13:08 .
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 ..
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 .git
-rw-r--r-- 1 mauro_codes mauro_codes  362 Jan 22 12:55 .gitignore
-rw-r--r-- 1 mauro_codes mauro_codes 4.4K Jan 22 12:55 README.md
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 components
-rw-r--r-- 1 mauro_codes mauro_codes 1.1K Jan 22 12:55 config.ts
drwxr-xr-x 1 mauro_codes mauro_codes  512 Jan 22 12:55 helpers

Learn more about the `ls` command

There are dozens of arguments that you can use with the ls command. If you want to dig dipper,
type man ls in your terminal to display the user manual for the ls command.

Search

Locate the binary for a program

If you want to locate where the binary (executable) for a specific command or program is located. You can use the which command:

## Locate binary for the ls command
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ which ls
/usr/bin/ls
## Locate binary for git
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ which git
/usr/bin/git

Locate the binary, source, and user manual for a program

You can use the whereis command to locate the binary, source, and user manual for a program. You can use the -b, -m, and -s arguments to limit the results to binaries, manual and source, respectively

## Locate binary, manual, and source for git
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ whereis git
git: /usr/bin/git /mnt/c/Program Files/Git/cmd/git.exe /usr/share/man/man1/git.1.gz
## Locate only binary and manual for Git, and only the manual for ls command
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ whereis -bm git -m ls
git: /usr/bin/git /mnt/c/Program Files/Git/cmd/git.exe /usr/share/man/man1/git.1.gz
ls: /usr/share/man/man1/ls.1.gz

Locate files and directories by name

Type find [path-to-search] -iname [name-of-the-file-you-want-to-search] to find any file or directory that contain the given name in their title.

The path to search is optional. If it is not specified, the find command will run on your current working directory (and its descendants)
The -iname argument means that our search will be case insensitive.

- If you want to learn more about this command, type `man find` to display the user manual.
## Check current working directory
mauro_codes@DESKTOP-HIQ7662:~/projects$ pwd
/home/mauro_codes/projects

## Find files that contain "posts" on my current working directory and its descendants
mauro_codes@DESKTOP-HIQ7662:~/projects$ find -iname posts
./nextjs-tailwindcss-blog-starter/pages/posts
./nextjs-tailwindcss-blog-starter/posts
## Find files that contain "posts" on a specific directory and its descendants
mauro_codes@DESKTOP-HIQ7662:~/projects$ find ./nextjs-tailwindcss-blog-starter/pages/ -iname posts
./nextjs-tailwindcss-blog-starter/pages/posts

Get a brief description for a command

If you don't know what a certain command does, Type whatis [command-name] like this:

## Asking about the cat command
mauro_codes@DESKTOP-HIQ7662:~/projects$ whatis cat
cat (1)              - concatenate files and print on the standard output
## Asking about the find command
mauro_codes@DESKTOP-HIQ7662:~/projects$ whatis find
find (1)             - search for files in a directory hierarchy

History

Get previous commands (one by one)

You can access your recent command by pressing the Up Arrow key ⬆️. This is very useful if you want to repeat your last command. Let's say we move to a specific directory, and then we check our working directory like this:

## Move to a specific directory
mauro_codes@DESKTOP-HIQ7662:~$ cd projects/awesome-app/

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/awesome-app$ pwd
/home/mauro_codes/projects/awesome-app

⬆️ We'll get the pwd command

⬆️⬆️ We'll get the cd projects/awesome-app command

Repeat previous commands (full list)

Type history to get a numerated list containing the previous commands you run. Then, type ![number-of-the-command-to-repeat] to repeat that command

## Get the history list
mauro_codes@DESKTOP-HIQ7662:~$ history
    1  ls
    2  clear
    3  pwd
    4  mkdir projects
    5  cd projects

## Run command number 1 (ls)
mauro_codes@DESKTOP-HIQ7662:~$ !1
projects

Repeat the last command

Type !! (bang-bang command) to repeat the last command. This is especially useful when you forgot to add sudo on your last command:

## Running update without sudo (Permission denied)
mauro_codes@DESKTOP-HIQ7662:~$ apt update
Reading package lists... Done
E: Could not open lock file /var/lib/apt/lists/lock - open (13: Permission denied)
E: Unable to lock directory /var/lib/apt/lists/
W: Problem unlinking the file /var/cache/apt/pkgcache.bin - RemoveCaches (13: Permission denied)
W: Problem unlinking the file /var/cache/apt/srcpkgcache.bin - RemoveCaches (13: Permission denied)

## Using the bang-bang command to append the last command after sudo
mauro_codes@DESKTOP-HIQ7662:~$ sudo !!
sudo apt update
[sudo] password for mauro_codes:
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]
Hit:2 http://archive.ubuntu.com/ubuntu focal InRelease
Get:3 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
...

Working with files and directories

Create a new file (without open it)

Type touch [name-of-your-file] to create a new file without open it on a text editor. This is useful if you just want to create an empty file but don't need to change it right now.

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ pwd
/home/mauro_codes/projects/landing-page

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md

## Create an empty js file
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ touch main.js

## List the content for the working directory (including your new file) 
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  main.js

Create a new file using a text editor

Type nano [name-of-your-file] to create a new file and open it using the text editor nano. If you want to learn more about nano, you can Type man nano on your terminal to display the nano user manual.

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ pwd
/home/mauro_codes/projects/landing-page

## List the content for the working directory 
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  main.js

mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ nano index.html

After running the last command, you'll be able to edit the file using nano:

Copy a file

You can use the cp (Copy) command to copy files and directories
Type cp [source-path-of-your-file] [destination-path-for-your-file] to copy a file into a new destination.

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index.html  main.js  temp

## Copy the README.md file into the temp directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cp README.md temp/README.md

## List the content for the working directory and check that your file is still there.
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index.html  main.js  temp

## List the temp directory's content and check if your file was copied.
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls temp/
README.md  index-copy.html

Create a new directory

Type mkdir [new-directory-name] to create a new directory in your current working directory

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index-empty-copy.html  index.html  main.js

## Create a new directory called "scripts"
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ mkdir scripts

## List the content to check if our new directory was created
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index-empty-copy.html  index.html  main.js  scripts

Remove an empty directory

Type rmdir [name-of-the-directory-you-want-to-remove] to remove an empty directory. Please note that this command will only work with empty directories.

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index.html  main.js  temp

## Remove the "temp" empty directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ rmdir temp

## List the content and check that the directory was removed
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index.html  main.js

Remove command (rm)

Remove a file

Type rm [name-of-your-file] to remove a file

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page/temp$ ls
README.md  index-copy.html

## Remove the index-copy.html file
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page/temp$ rm index-copy.html

## List the content for the working directory and check that the file was removed
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page/temp$ ls
README.md

Remove a directory recursively

Type rm -rfi [name-of-your-directory] to recursively remove a directory with all its files and sub-directories.

Please be careful! This is one of the most dangerous commands you can run. If you run rm -rfi /, you'll erase your entire root partition. Be sure to specify the path for the directory you want to delete. In this example, In this example, I include the -i argument to ask for confirmation.

## List the content of the temp folder (It has one file)
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls temp/
total 0
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 24 19:45 .
drwxr-xr-x 1 mauro_codes mauro_codes 512 Jan 24 19:44 ..
-rw-r--r-- 1 mauro_codes mauro_codes   8 Jan 24 19:45 file.txt

## Recursively remove the temp folder
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ rm -rf temp/

## Check that the temp folder was removed
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls temp/
ls: cannot access 'temp/': No such file or directory

Concatenate command (cat)

You can use the cat (concatenate) command to read data from a file and print their content as output

View a single file

Type cat [name-of-your-file]:

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ pwd
/home/mauro_codes/projects/landing-page

## Print the content of the index.html file
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cat index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>My Website</title>
  </head>

  <body>
    <script src="js/main.js"></script>
  </body>
</html>

View a single file including the line numbers

Type cat -n [name-of-your-file]:

## Check the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ pwd
/home/mauro_codes/projects/landing-page

## Print the content of the index.html file
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cat -n index.html
     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <meta charset="utf-8" />
     5      <meta http-equiv="x-ua-compatible" content="ie=edge" />
     6      <meta name="viewport" content="width=device-width, initial-scale=1" />
     7
     8      <title>My Website</title>
     9    </head>
    10
    11    <body>
    12      <script src="js/main.js"></script>
    13    </body>
    14  </html>

Copy the content of one file to another file

Type cat [filename-whose-contents-is-to-be-copied] > [destination-filename]:

## Create an empty file called index-empty-copy.html
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ touch index-empty-copy.html

## Copy the content of index.html to index-empty-copy.html
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cat index.html > index-empty-copy.html

## Print the content of the index-empty-copy.html file
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ cat index-empty-copy.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>My Website</title>
  </head>

  <body>
    <script src="js/main.js"></script>
  </body>
</html>

Learn more about the `cat` command

Type man cat to display the user manual for the cat command

Move command (mv)

You can use the mv (move) command for moving and renaming files

Move a file

Type mv [source-path-of-your-file] [destination-path-for-your-file] to move a file into a new directory

## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index-empty-copy.html  index.html  main.js  temp

## Move the index-empty-copy.html file to the temp directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ mv index-empty-copy.html temp/index-empty-copy.html

## List the content again and check that the file is no longer in the current working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls
README.md  index.html  main.js  temp

## List the temp folder and check that the file is now there.
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page$ ls temp/
index-empty-copy.html

Rename a file

Type mv [name-of-your-file] [new name-of-your-file] to rename a file


## List the content for the working directory
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page/temp$ ls
index-empty-copy.html

## Rename the index-empty-copy.html file
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page/temp$ mv index-empty-copy.html index-copy.html

## List the content for the working directory (check if your file's name was updated)
mauro_codes@DESKTOP-HIQ7662:~/projects/landing-page/temp$ ls
index-copy.html

Final words

I missed tons of powerful commands on this post, but I decided to keep them for a future post. This is already huge.😄

I would love to hear your feedback about this format. Is it clear? Is it useful? Let me know if you want me to cover any particular command on my next post.

Forem: Mauro Garcia

Building a mobile authentication flow for your SaaS with Expo and Supabase

What do you get from this tutorial?

Expo-Supabase template is now available with SpiroKit!

Creating a new Supabase project

Setting up authentication on Supabase

Creating an Expo app

Setting up Supabase in your Expo app

Setting up React Navigation

Updating the Login screen

Updating the Register screen

Updating the Forgot Password screen

Updating the Home Screen

Final thoughts

6 React Native UI Kits for 2023

Building apps take time

React Native UI Kits

Why should we use a React Native UI Kit?

Best React Native UI Kits

SpiroKit

Resources & stats

React Native Elements

Resources & stats

NativeBase

Resources & stats

React Native Paper

Resources & stats

UI Kitten

Resources & stats

Tamagui

Resources & stats

Conclusions

Bridging the gap between web & native with Expo router

Intro

Introducing Expo Router

What's the big deal about this library?

Building a magazine app

Project setup

With SpiroKit

With your own UI

First use

1. Adding the Tab navigator

2. Updating the app/index.js file

3. Adding the "News" and "Settings" tabs

4. Adding UI to the "News" Route

5. Adding UI to the "Settings" Route (Optional)

6. Adding a dynamic route for the news details screen

Conclusion

Expo 101: Building mobile apps in weeks, not years

A little bit of history

Working on mobile was a pain

Code reusability

Signing and certificates

iOS development: a luxury for a few

Slow feedback loop

Hybrid app development

What is Expo?

Workflows

Bare workflow

Managed workflow

Expo ecosystem

Expo CLI

Expo Dev Tools

Expo Snack

Expo Application Services (EAS)

Over the air updates

Expo SDK

I'm sold! Where should I start?

Bootstrapping a new project

Running your project on a real device

Making changes in real-time with Expo Go

Adding new functionality using the Expo SDK

Building an app with Expo Application Services

Conclusions

Shameless plug

Adding Storybook to your Expo project

What is Storybook, and how can it help you?

Setup options

Storybook 100% Web

Pros

2. Updating the `app/index.js` file