Skip to main content

Node Apps - React Wordle

Overview​

This guide walks you through configuring and deploying a React application using Nife. You'll learn how to set up your React project, initialize it with Nife CLI, and deploy it to production using the Wordle game example.

React Wordle is a clone of the popular Wordle word-guessing game built with React, TypeScript, and Tailwind CSS. This project demonstrates modern frontend development practices including state management, component composition, type safety, and interactive UI design. It's an excellent example for validating frontend deployment workflows and container-based delivery on Nife.io.

Application Features:

  • Interactive word guessing game
  • Real-time feedback on guesses
  • Responsive design across all devices
  • Built with TypeScript for type safety
  • Tailwind CSS for modern styling
  • Docker containerization support
  • Deployment-ready configuration
Example Repository

We'll use this sample repository: React Wordle

Prerequisites​

Before you start, make sure you have:

  • Nife account and CLI installed

Step 1: Install Nifectl CLI​

Follow the official installation guide for your operating system:

Nifectl Installation Guide

Step 2: Login to Nifectl​

Authenticate with your Nife account:

nifectl auth login

You'll be prompted to enter your credentials. A browser window will open to complete the authentication.

Repository Support

You can deploy applications directly from GitHub, Bitbucket, or GitLab.

Step 3: Initialize Your Application​

Initialize the React Wordle application for deployment:

nifectl init

Interactive Configuration​

The CLI will prompt you for the following information. Follow each step carefully:

1. App Name​

? App Name (leave blank to use an auto-generated name)

Press Enter to generate a random name or enter your preferred app name.

2. Select Organization​

? Select organization: [Use arrows to move, type to filter]
  BNC (bnc)
  NIFEDOCUMENT (nifedocument)

Use arrow keys to select your organization.

3. Deployment Source​

? Deployment source: [Use arrows to move, type to filter]
  Image           Public Docker image
  Docker          Private registry image
  Database        S3/GS, Postgres, Redis, Mongo...
  Loadbalancer    Load balancer config
  Runtime         Language & framework runtimes
  Repository      GitHub ,GitLab

Select "Repository" from the list.

4. Repository Provider​

? Select repository provider: [Use arrows to move, type to filter]
  GitHub          Deploy from a GitHub repository URL
  GitLab          Deploy from a GitLab repository URL
  Bitbucket       Deploy from a Bitbucket repository URL

Select GitHub for this example.

5. GitHub URL and Branch​

? Enter your GitHub URL: https://github.com/nifetency/react-wordle.git
? Enter your GitHub Branch: main

Provide your repository URL and the branch to deploy (typically main or master).

6. Deployment Type​

? Deployment type (Kubernetes workload kind): Deployment

Leave as default (Deployment).

7. Workload and Resource Configuration​

? Workload type: deployment
? Resource type: CPU
? Do You Wish To Add Volume (y/N): No
? Specify the Replicas Count for deployment(1): 1

Accept the defaults for a standard React deployment.

8. Port Configuration​

? Select Internal Port: [? for help] (4000): 3000
? Select External Port: [? for help] (80): 80

Set internal port to 3000 (React default) and external port to 80.

9. Memory and Routing​

? Do You Wish To Add Memory Allocations: No
? Select Routing Policy: [Use arrows to move, type to filter]
  Geolocation
  Latency

Select Geolocation for global distribution.

10. Deployment Strategy​

? Deployment strategy: [Use arrows to move, type to filter]
  rolling
  recreate
  blue-green
  canary
  shadow
  ab-testing

Select rolling for zero-downtime deployments.

11. Environment Variables​

? Add environment variables? (y/N): No

Skip for now (can be added later if needed).

Configuration Complete​

When initialization finishes, you'll see:

New app created
  Name         = your-app-name
  Organization = nifedocument
  Version      = 0
  Status       = New
  Hostname     = <empty>

Update config file nife.toml

Your nife.toml configuration file has been created with all your settings.

Step 4: Deploy Your Application​

Before deploying, you'll need to select the region where your application will be deployed.

Deploy the React Wordle application:

nifectl deploy

Select Deployment Region​

When you run the deploy command, you'll be prompted to select a region:

? Select region for deployment: [Use arrows to move, type to filter]
  IND - India, Mumbai
  EUR - Europe
  APAC - Asia Pacific
  AMER - Americas
  my-cluster - my-cluster

Use arrow keys to select your desired region. Choose the region closest to your target users for optimal performance.

Deployment Process​

The deployment process includes:

  1. Validating app configuration
  2. Cloning repository
  3. Building Docker image
  4. Optimizing image
  5. Creating release and deployment

Expected Output​

Deploying react-wordle

==> Validating App Configuration
    --> Validating App Configuration done

==> Building Image from Repository
    --> Cloning repository
    --> Building Docker image

==> Optimizing Image
    --> Done Optimizing Image

==> Creating Release
==> Creating Deployment

Release v1 created at: https://your-app.on.nifetency.com
Deployment...Done
Keep Track of Your URL

Your deployed application will be available at the URL shown in the output. Save this for later reference.

Step 5: Access Your Application​

Once deployment completes successfully, your React Wordle application is live!

Navigate to your deployment URL:

https://your-app.on.nifetency.com
info

Check the Nife Documentation or contact support if you encounter any issues.