Comprehensive Guide: Setting Up and Optimizing Material Dashboard React on a New RHEL-Based VPS Print

Material Dashboard React by Creative Tim is a highly popular React-based admin panel template built with Material-UI. This guide provides step-by-step instructions to help you install, set up, configure, and optimize it on a clean RHEL-based VPS, ensuring you achieve a robust, scalable, and modern admin panel setup.

Purpose of Material Dashboard React

Material Dashboard React is a powerful tool designed to simplify the development of admin panels, dashboards, and web applications. By leveraging Material-UI, it ensures consistency, responsiveness, and a modern aesthetic, providing an excellent user experience. It serves as a comprehensive solution for:

• Managing Data: Efficiently handle large volumes of data.
• Visualizing Analytics: Create dynamic, interactive charts and graphs.
• Streamlining Workflows: Automate and simplify complex processes.

For developers building data-centric applications, Material Dashboard React offers a highly customizable and feature-rich foundation.

Use Cases of Material Dashboard React

1. Business Intelligence Dashboards: Monitor key performance indicators (KPIs) and business metrics in real time.
2. User Management Systems: Organize and manage user accounts, roles, and permissions with ease.
3. E-Commerce Admin Panels: Track sales, manage inventory, and analyze customer data for actionable insights.
4. Project Management Tools: Keep tabs on project progress, team collaboration, and deadlines in a structured and organized manner.
5. Analytics and Reporting: Create and display interactive visualizations like graphs, charts, and tables for in-depth data analysis.
6. IoT Device Monitoring: Manage and track IoT devices and monitor real-time data feeds.
7. Healthcare Applications: Securely handle patient records, appointment scheduling, and healthcare analytics.
8. Educational Platforms: Streamline the management of student records, course details, and performance analytics.

Prerequisites

Before we start, ensure the following:

1. A clean RHEL-based VPS instance (RHEL 8 or RHEL 9).
2. Root or sudo access to the server.
3. A domain or subdomain pointing to your VPS (optional but recommended).
4. Basic understanding of command-line operations.

Step 1: Update Your VPS

Ensure the VPS is up-to-date with the latest updates.

sudo dnf update -y
sudo dnf upgrade -y

Note: The sudo command is used by non-root users to execute commands with root privileges. If you are logged in as root, you already have administrative access and do not need sudo.

For example:

• Running sudo dnf install -y git as root results in an error:
  -bash: sudo: command not found

• Instead, simply use:
  dnf install -y git

This works because root has full privileges without sudo.

Step 2: Install Required Tools

You'll need Node.js, npm (Node Package Manager), Git, and other essential tools.

1. Install Node.js and npm: Use the NodeSource repository for the latest stable version of Node.js.

   curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
   sudo dnf install -y nodejs
   

2. Verify installation:

   node -v
   npm -v
   ​

3. Install Git:

   sudo dnf install -y git
   ​

4. Install other tools:

   sudo dnf install -y wget curl unzip tar
   ​

Step 3: Set Up a Working Directory

Create a directory to host the Material Dashboard React application.

cd /home
mkdir ~/material-dashboard
cd ~/material-dashboard

Step 4: Clone Material Dashboard React Repository

Material Dashboard React's codebase can be downloaded either from Creative Tim's official GitHub repository (free version) or from the purchased PRO package.

Download the Free Version:

1. Clone the Repository: Clone the Material Dashboard React repository into the default directory (material-dashboard-react):

   git clone https://github.com/creativetimofficial/material-dashboard-react.git
   

2. Rename the Directory (Optional): If you prefer a shorter or custom name, rename the material-dashboard-react directory:

   mv material-dashboard-react dashboard
   ​

3. Navigate to the Renamed Directory: Enter the renamed directory:

   cd dashboard
   ​

Extract if Using the Purchased PRO Version:

If you've purchased the PRO version, upload the material-dashboard-pro.zip file to your VPS and follow these steps:

Extract the Files:

unzip material-dashboard-pro.zip -d /home/dashboard
cd /home/dashboard

Ensure the ZIP File Exists: Confirm that the material-dashboard-pro.zip file is uploaded to your VPS before running the unzip command. Adjust the extraction path as needed.

Note:

Since your VPS hostname is myweb.example.com, using a simple directory name like dashboard improves readability and keeps the project directory clean and intuitive. Always organize project files in /home or another dedicated location for better management.

Step 5: Install Dependencies

Install all required Node.js dependencies for the dashboard.

npm install

Step 6: Configure the Application

Edit the configuration file to customize settings.

1. Environment Variables: If the dashboard requires environment variables, create a .env file at the root directory.

   Example:

   touch .env
   vi .env
   

2. Add variables:

   REACT_APP_API_URL=https://api.example.com
   REACT_APP_TITLE=Dashboard
   ​

3. Custom Configurations: Modify src files (e.g., src/config.js) to set up API endpoints, default settings, and more.

Step 7: Run the Development Server

Start the React application in development mode to verify that everything is working.

npm start

Access the Development Server:

• By default, the server runs on http://localhost:3000.
• To access it from your local machine:
  • Use your VPS IP address: http://<your-vps-ip>:3000 Example: http://192.168.1.100:3000
  • If your VPS is set up with a domain name, use: http://<your-domain>:3000 Example: http://build.example.com:3000

Ensure that port 3000 is open in your VPS firewall for external access.

Handling npm start Warnings:

During the development process, you might encounter warnings like:

Compiled with warnings.

Failed to parse source map from '/path/to/file' file: Error: ENOENT: no such file or directory.

These warnings occur when source maps reference files that are missing from the package. These are non-breaking warnings and do not affect the functionality of your application.

To Suppress Warnings:

1. Ignore them if you’re not debugging the specific library.
2. Add configuration to suppress source map warnings in webpack.config.js or your package.json as needed. Refer to the troubleshooting section if warnings persist.

Now, open the URL in your browser and verify that the Material Dashboard React app is running successfully!

Step 8: Build the Production Version

To optimize the dashboard for production, build a static version.

npm run build

This generates a build/ directory containing optimized static files.

Step 9: Serve the Application

Use a production-ready server like NGINX or Apache to serve the React app.

1. Install NGINX:

   sudo dnf install -y nginx
   

2. Configure NGINX: Create a new server block configuration for the dashboard.

   sudo nano /etc/nginx/conf.d/material-dashboard.conf
   ​

3. Add the following configuration:

   server {
       listen 80;
       server_name your-domain.com;
   
       root /home/your-user/material-dashboard/build;
   
       index index.html;
   
       location / {
           try_files $uri /index.html;
       }
   }
   ​

4. Start NGINX:

   sudo systemctl enable nginx
   sudo systemctl start nginx
   ​

5. Access the Dashboard: Open the browser and navigate to http://your-domain.com or http://<VPS-IP>.

Step 10: Optimize the Application

For better performance and security:

1. Enable Firewall and Open Port 80/443:

   sudo firewall-cmd --permanent --add-service=http
   sudo firewall-cmd --permanent --add-service=https
   sudo firewall-cmd --reload
   

2. Install SSL Certificates: Use Let's Encrypt for free SSL.

   sudo dnf install -y certbot python3-certbot-nginx
   sudo certbot --nginx -d your-domain.com
   ​

3. Optimize NGINX Configuration: Enable caching and compression in NGINX.

   location ~* \.(?:ico|css|js|gif|jpg|jpeg|png|svg|woff|woff2|ttf|otf|eot|ttc)$ {
       expires 6M;
       access_log off;
       add_header Cache-Control "public";
   }
   
   gzip on;
   gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/json;
   gzip_min_length 256;
   ​

4. Reload NGINX:

   sudo systemctl reload nginx
   ​

Step 11: Manage the Application

1. Update Dependencies Regularly:

   npm update
   

2. Monitor Logs: For application logs, use:

   journalctl -u nginx
   ​

3. Backup Regularly: Keep backups of your code and configurations.

   tar -czvf material-dashboard-backup.tar.gz ~/material-dashboard
   ​

Conclusion

You now have a fully functional, secure, and optimized Material Dashboard React application running on your RHEL-based VPS. This setup ensures scalability, performance, and modern UI/UX for your admin panel. For further customizations, explore Creative Tim's documentation and Material-UI's official guides.