Skip to main content

Node Apps - React Password Generator

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 a Password Generator example.

The React Password Generator is a simple yet powerful application that generates secure passwords based on user preferences. It demonstrates key React concepts including state management, component composition, and event handling.

Application Features:

  • Generate random passwords with customizable length
  • Toggle options for uppercase, lowercase, numbers, and special characters
  • Copy password to clipboard functionality
  • Real-time password strength indicator
  • Responsive design that works on all devices
Example Repository

We'll use this sample repository: React Password Generator

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.

Step 3: Initialize Your Application​

Initialize the React 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_password_generator.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).

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 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-app

==> 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 application is live!

Navigate to your deployment URL:

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

Check the Nife Documentation if you encounter any issues.