Before you begin, make sure your development environment includes Node and an npm package manager.

1.Node.js

Install Node.js using downloaded file.

To check your node version, run node -v in a terminal/console window.

2.Npm package manager

CLI (command line interface), and React apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager.

This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

For better understanding React we suggest you to once go through official documentation of React from anodejs.org.

Create Initial application

Run the npm command create-next-app and provide the name my-app, as shown here:

npx create-next-app@latest

The create-next-app command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Serve Application

Go to the workspace folder (my-app).

cd my-app

Launch the server by using the npm command npm start

npm run dev

Build you application for host on server using below command:
npm run build

It will create one dist file in your theme folder. Make zip of dist folder. so here you are ready to upload your theme on server.

If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder by pastng below code

• Options -MultiViews
• RewriteEngine On
• RewriteCond %{REQUEST_FILENAME} !-f
• RewriteRule ^ index.html [QSA,L]

Now upload your dist folder on public folder

First, you must download and install node.js. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.

Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from anodejs.org.

You can check it in your terminal window using these commands node --version and npm --version.

Riho Template Setup

• Download and extract an Riho Template from themeforest
• Extract it and then go in to Template folder. cd Template
• Create the .env.local File: Inside your project root directory, create a file named .env.local to store environment variables execute the following command.

touch .env.local

• Configure .env.local Variables
• 1. For next-auth to work properly, you'll need to configure a few environment variables based on the authentication provider(s) you're using. Here's a basic example for Google OAuth, but the structure will vary slightly depending on the provider.

Example Configuration for Google OAuth: .env.local

NEXTAUTH_SECRET=your_super_secret_key
NEXTAUTH_URL=http://localhost:3000    /* can use any port */

# Google OAuth Credentials
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

• 2. NEXTAUTH_SECRET: A secret key used to encrypt JWT tokens. You can generate a random string using any secret key Open your terminal in mac/linux and enter the following command and it will generates a random 32-character base64-encoded string using OpenSSL:

openssl rand -base64 32

If your are a Windows user you can generate from here :

https://generate-secret.vercel.app/32
• 3. NEXTAUTH_URL: This is the URL of your application. During development, it is usually http://localhost:3000 In production, this will be the live domain of your website.
• 4. Add the Authentication Provider:
• In your Next.js project, create a file at app/api/auth/[...nextauth]/authOption.tsx (or .js for JavaScript users) and add your providers. Here's an example using Google:

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
})

• 5.More details for next-auth prefer next-auth documentation Next-Auth-Documentation
• Import all dependency by installing npm command npm install
• Now you are in stage to successfully run Cion using below command: npm run dev

NPM use the package.json file and automatically install the required local dependencies listed in it.