Let's begin
Thank you for buying the Moscow admin template
Main dependancies
- React 19.0.0
- Next 15.1.5
- Bootstrap 5.3.3
- Typescript 5
- Scss
Moscow Next Admin Theme is pure Next theme, Yes! you read correct, it's No Jquery Next admin theme including next-auth and all feature and functionality with ease of integration for your project. Moscow theme documentaition will help you to understand Next from scratch for making your own perfect real time dream application.
Moscow Admin is a responsive HTML template that is based on the CSS framework Bootstrap 5 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Gulp, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Moscow Admin and provide a consistent look throughout the template.
Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.
Prerequisites
Before you begin, make sure your development environment includes Node and an npm package manager.
Install Node.js using downloaded file.
To check your node version, run node -v
in a terminal/console window.
CLI (command line interface), and Next 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 Next we suggest you to once go through official documentation of Next from anodejs.org.
Next setup
Run the npm command create-next-app and provide the name my-app, as shown here:
npx create-next-app@latest
The create-react-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.
Go to the workspace folder (my-app).
cd my-app
Launch the server by using the npm command npm start
npm run dev
Build Application
Build you application for host on server using below command: npm run build
It will create one dist file in your Template folder. Make zip of dist folder. so here you are ready to upload your Template 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 folder on public folder
Moscow setup
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.
- Download and extract an Moscow 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. - 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.
- 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: - 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: - 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
touch .env.local
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
openssl rand -base64 32
If your are a Windows user you can generate from here :
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,
}),
],
})
NPM use the package.json file and automatically install the required local dependencies listed in it.