GlobeScout Tailwind Templates

Globescout

Built a fully responsive and modern web application using the REST Countries API to display detailed information about countries, including names, capitals, regions, populations, and flags. Utilized React Router v7 for seamless navigation and Tailwind CSS for a sleek, responsive UI design.

Welcome to React Router!

A modern, production-ready template for building full-stack React applications using React Router.

Features

  • šŸš€ Server-side rendering
  • āš”ļø Hot Module Replacement (HMR)
  • šŸ“¦ Asset bundling and optimization
  • šŸ”„ Data loading and mutations
  • šŸ”’ TypeScript by default
  • šŸŽ‰ TailwindCSS for styling
  • šŸ“– React Router docs

Getting Started

Installation

Install the dependencies:

npm install

Development

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Building for Production

Create a production build:

npm run build

Deployment

Docker Deployment

This template includes three Dockerfiles optimized for different package managers:

  • Dockerfile - for npm
  • Dockerfile.pnpm - for pnpm
  • Dockerfile.bun - for bun

To build and run using Docker:

# For npm
docker build -t my-app .

# For pnpm
docker build -f Dockerfile.pnpm -t my-app .

# For bun
docker build -f Dockerfile.bun -t my-app .

# Run the container
docker run -p 3000:3000 my-app

The containerized application can be deployed to any platform that supports Docker, including:

  • AWS ECS
  • Google Cloud Run
  • Azure Container Apps
  • Digital Ocean App Platform
  • Fly.io
  • Railway

DIY Deployment

If you're familiar with deploying Node applications, the built-in app server is production-ready.

Make sure to deploy the output of npm run build

ā”œā”€ā”€ package.json
ā”œā”€ā”€ package-lock.json (or pnpm-lock.yaml, or bun.lockb)
ā”œā”€ā”€ build/
│   ā”œā”€ā”€ client/    # Static assets
│   └── server/    # Server-side code

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.


Built with ā¤ļø using React Router.

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes