FREE Web+API Hosting on Expo

Key Concepts

Vite, Expo, EAS (Expo Application Services), API routes, SPA (Single Page Application), Static Site Generation (SSG), Server-Side Rendering (SSR), CommonJS, esbuild, package.json, build scripts, deployment, client-server architecture, routes.json, TypeScript.

Creating a Vite App and Deploying with EAS

1. Project Setup:

   • Create a new Vite application using npm create vite. The application is named "jur-vite".
   • Navigate into the project directory: cd jur-vite.
   • Install dependencies using npm install.
   • Run the development server using npm run dev to ensure the base application is working.

2. Building the Vite App:

   • Build the application for production using npm run build. This creates a dist directory containing static assets.

3. Deploying to Expo Application Services (EAS):

   • Install the EAS CLI globally: npm install -g eas-cli.
   • Log in to EAS using eas login.
   • Deploy the application using eas deploy.
   • During the deployment setup, create a new EAS project and name it "jur-vite-expo-app".
   • The deployment process provides a URL where the deployed application can be accessed.

Building an Expo App with API Routes

1. Creating an Expo App:

   • Navigate back to the parent directory.
   • Create a new Expo application using npx create-expo-app. The application is named "jur-expo".
   • Navigate into the project directory: cd jur-expo.
   • Install dependencies using pnpm install.
   • Start the Expo development server using pnpm web.

2. Building and Deploying the Expo App:

   • Build the Expo app for the web platform using npx expo build:web.
   • Deploy the application using eas deploy.
   • Create a new EAS project and name it "j-her-expo".
   • The deployment process provides a URL for the deployed Expo application.

3. Adding an API Route to the Expo App:

   • Create a new file named hello.ts inside the app directory. This file will define the API route.
   • The hello.ts file exports a default asynchronous function that handles the request and sends a JSON response:

   import { Request, Response } from 'express';
   
   export default async function handler(req: Request, res: Response) {
     res.status(200).json({ name: 'Hello' });
   }
   

   • Rename hello.ts to +api.ts to mark it as an API route.
   • Modify the expo.config.js file to change the web configuration from static to server to enable server-side processing of API routes:

   web: {
     bundler: 'metro',
     output: 'server',
   },
   

4. Deploying the Expo App with the API Route:

   • Deploy the updated application using eas deploy.
   • Access the API route by navigating to /hello on the deployed application's URL.

Replicating Expo's API Route Functionality in a Vite App

1. Restructuring the Vite App's dist Directory:

   • Modify the package.json file to include custom build scripts.
   • Rename the original build script to build:vite.
   • Create a new build script that executes build:vite and then restructures the dist directory.
   • The restructuring involves creating client and server directories within dist.
   • Move the static assets (JavaScript bundle, images, fonts, SVG files) into the dist/client directory.
   • Move the index.html file into the dist/server directory.

   "scripts": {
     "dev": "vite",
     "build:vite": "vite build",
     "build:client": "mkdir -p dist/client && mv dist/assets dist/client && mv dist/vite.svg dist/client",
     "build:server": "mkdir -p dist/server && mv dist/index.html dist/server",
     "build": "npm run build:vite && npm run build:client && npm run build:server"
   }
   

2. Creating the routes.json File:

   • Create a directory named api-assets at the root of the project.
   • Inside api-assets, create a file named routes.json. This file will define the routing configuration for the server.
   • For the initial setup, the routes.json file includes a route for the index.html file:

   {
     "routes": [
       {
         "src": "^/$",
         "dest": "/index.html"
       }
     ]
   }
   

3. Copying the routes.json File to the dist Directory:

   • Add a new build script to copy the routes.json file into the dist/server/expo directory.

    "build:expo": "mkdir -p dist/server/expo && cp api-assets/routes.json dist/server/expo/routes.json",
    "build": "npm run build:vite && npm run build:client && npm run build:server && npm run build:expo"
   

4. Deploying the Restructured Vite App:

   • Deploy the updated application using eas deploy.
   • Verify that the application is still accessible at the deployment URL.

5. Adding an API Route to the Vite App (Backend):

   • Create a directory named api-source at the root of the project.
   • Inside api-source, create a file named hello.ts. This file will define the API route handler.
   • The hello.ts file exports an asynchronous function that handles the request and sends a JSON response:

   import { Request, Response } from 'express';
   
   export async function get(req: Request, res: Response) {
     res.status(200).json({ name: 'Hello from Vite!' });
   }
   

6. Compiling the TypeScript API Route to CommonJS:

   • Install esbuild as a development dependency: npm install -D esbuild.
   • Add a new build script to compile the TypeScript files in the api-source directory into CommonJS files in the dist/server/expo directory.

   "build:api": "esbuild api-source/*.ts --bundle --format=cjs --platform=node --outdir=dist/server/expo --tsconfig ./tsconfig.json",
   "build": "npm run build:vite && npm run build:client && npm run build:server && npm run build:expo && npm run build:api"
   

7. Updating the routes.json File to Include the API Route:

   • Modify the routes.json file to include a route for the new API endpoint:

   {
     "routes": [
       {
         "src": "^/hello$",
         "dest": "/hello.js"
       },
       {
         "src": "^/$",
         "dest": "/index.html"
       }
     ]
   }
   

8. Deploying the Vite App with the API Route:

   • Deploy the updated application using eas deploy.
   • Access the API route by navigating to /hello on the deployed application's URL.

9. Adding a Second API Route (Pokemon):

   • Create a new file named pokemon.ts inside the api-source directory. This file will fetch data from the PokeAPI and return it as a JSON response.

   import { Request, Response } from 'express';
   
   export async function get(req: Request, res: Response) {
     const response = await fetch('https://pokeapi.co/api/v2/pokemon');
     const data = await response.json();
     res.status(200).json(data);
   }
   

   • Update the routes.json file to include a route for the new /pokemon API endpoint:

   {
     "routes": [
       {
         "src": "^/hello$",
         "dest": "/hello.js"
       },
       {
         "src": "^/pokemon$",
         "dest": "/pokemon.js"
       },
       {
         "src": "^/$",
         "dest": "/index.html"
       }
     ]
   }
   

10. Updating the Vite App (Frontend) to Consume the API:

    • Modify the App.tsx file to fetch data from the /pokemon API endpoint and display the list of Pokemon names.
    • Use useState to store the list of Pokemon names and useEffect to fetch the data when the component mounts.
    • Update the UI to display the list of Pokemon names.
    • Remove the contents of App.css and update index.css for basic styling (black and white color scheme).

11. Deploying the Complete Application:

    • Deploy the final version of the application using eas deploy.
    • Verify that the application fetches and displays the Pokemon data from the API endpoint.

EAS Hosting Features

• Overview: Provides insights into application usage and performance.
• Deployments: Lists all deployments with associated details.
• Hosting: Manages hosting configurations, including custom domains.
• Production Deployments: Supports production-ready deployments.
• Custom Domains: Allows the use of custom domain names for deployed applications.
• Unified Platform: EAS provides a unified platform for hosting web applications, iOS binaries, and Android binaries.

Conclusion

The video demonstrates how to replicate Expo's API route functionality in a Vite application by restructuring the project, creating a routes.json file, and using esbuild to compile TypeScript API routes to CommonJS. This allows developers to leverage EAS for hosting Vite SPAs with serverless API endpoints, similar to how Expo handles API routes for web applications. The process involves modifying build scripts, creating a client-server architecture in the dist directory, and configuring routing through the routes.json file. The final result is a Vite application that can fetch data from custom API endpoints deployed on EAS.