1. Home
  2. Docs
  3. Admin Panel Documentation
  4. Getting Started with React & Node.js

Getting Started with React & Node.js

In this section, we are going to describe how to get your React and Node.js running on your machine. Those two are the minimal requirements for running an admin panel.

1. Installing Node.js and React

This is first step in getting our admin panel running, so to install Node.js just follow the official guide. Node.js comes in with the package manager npm which helps us install everything else we need, react included.

2.  Getting our project ready to run

First we have to open a terminal/console/cmd and go to the admin panel’s folder. Once you’re in the folder’s path with the console you can run the command:

yarn install

This will get the server ready to run by installing all npm packages we are using (e.g. nextJS)

3. Running our project

Now we can run our project, and we will need the Terminal again. All what we have to do is to go into the admin panel’s folder, and run the command:

npm run dev

This will start the server, and should open the admin panel’s page on your browser. Now you can log into your account and you should see something like this if you go to http://localhost:3000:  By default, the database is linked to our own database. So what we have to do now is link your own database to the admin panel, and you will be ready to manage your database!

4. Configuring your admin panel

We are using Dopebase as the CMS infrastructure behind the admin panel, so you will need to do some configuration steps when switching to your own Firebase account.

4.1. In the adminPanel folder, open .env file and update all the mandatory fields to your own. You can get the values for these variables from your own Firebase Console

# Mandatory settings – Replace all of them with your own Firebase config values
STORAGE_TYPE=‘firebase’ # firebase | local
DATABASE_TYPE=‘firebase’ # firebase | postgres
WEBSITE_URL=http://localhost:3000

FIREBASE_PROJECT_ID=development-69cdc
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-eyo6i@development-69cdc.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY=—–BEGIN PRIVATE KEY—–yourkey——-END PRIVATE KEY—–\n
FIREBASE_DATABASE_URL=https://development-69cdc.firebaseio.com
FIREBASE_STORAGE_BUCKET=development-69cdc.appspot.com

4.2 Create a new user account at http://localhost:3000/register then go to Firebase Firestore and update the “users” collection for that user to have a field role with admin as a value (role: admin). Now login in the admin panel at http://localhost:3000/login with the admin account, and you should be having access to the admin panel itself at http://localhost:3000/admin

4.3 In the admin panel -> System -> Plugins enable both “Social Network” and “Blog” plugins

4.4. Make sure in Admin Panel -> System -> Themes the “classic” theme is being used.

That’s it. Your admin panel is fully connected to your own Firebase and you should be able to manage the users, posts and stories created in your mobile apps.