Open stesvis opened 1 week ago
I am also working on a new application using React + Vite. If you'd like, we can collaborate and help each other.
I am also working on a new application using React + Vite. If you'd like, we can collaborate and help each other.
I've tried different solutions but eventually i switched to a different theme that i already used in the past and i was familiar with.
But I'll still be curious to know if someone figures it out.
@CavaliereDavid @stesvis having the same problem, I tried to use version 4 with Next and Vite and I couldn't handle it, I had to downgrade to AdminLTE 3.2 to use it with React + Vite
@CavaliereDavid @stesvis having the same problem, I tried to use version 4 with Next and Vite and I couldn't handle it, I had to downgrade to AdminLTE 3.2 to use it with React + Vite
I found a way to use the latest version with React (ts) and vite. However, I am not sure if AdminLTE is the right answer for my needs after tinkering with It. If you need help, I am available.
@CavaliereDavid @stesvis having the same problem, I tried to use version 4 with Next and Vite and I couldn't handle it, I had to downgrade to AdminLTE 3.2 to use it with React + Vite
I found a way to use the latest version with React (ts) and vite. However, I am not sure if AdminLTE is the right answer for my needs after tinkering with It. If you need help, I am available.
nice man, if you found a way I would like to learn from you, how can we do a meet or whatever, you just tell me
Ok let's do It now: https://meet.jit.si/UnfairTitlesSitTogether
This guide will help you get started using AdminLTE with React, specifically in a Vite project. AdminLTE provides a responsive and customizable admin dashboard template built on top of Bootstrap, and here we will walk through the process of integrating it with React.
To start, we'll create a new React project using Vite. Vite is a modern build tool that provides fast and optimized development.
Open your terminal and run the following command to create a new Vite project:
npm create vite@latest
Select React as the project template when prompted.
Navigate into your project directory:
cd your-project-name
AdminLTE has recently made the transition from Bootstrap 4 to Bootstrap 5, and as of version 4.0.0-beta2, jQuery has been removed. This is a major update, and it is recommended to start using the latest beta version to avoid vulnerabilities in the LTS version.
Install AdminLTE via npm:
npm i admin-lte
This will add AdminLTE as a dependency in your package.json
file.
index.html
To properly use AdminLTE, you'll need to include its JavaScript and CSS files in your index.html
file. Vite uses this file as the entry point to load the necessary resources.
index.html
file located in the public
directory.Add the following <script>
and <link>
tags in the <head>
section of your index.html
file:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"
></script>
This links the latest AdminLTE styles and scripts to your project.
Since AdminLTE is built on top of Bootstrap 5, you should also include Bootstrap and FontAwesome (optional, but recommended for icons).
Add these links to your index.html
file, alongside the AdminLTE links:
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
Add the Bootstrap JavaScript as well:
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
AdminLTE provides many ready-made components in HTML format. To use them in a React project, you will need to convert them from HTML to JSX (React’s HTML-like syntax).
Here’s a simple example of converting an AdminLTE card component:
Convert the HTML to JSX. For example, an AdminLTE card in HTML might look like this:
<div class="card">
<div class="card-header">
<h3 class="card-title">Default Card Example</h3>
<div class="card-tools">
<span class="badge badge-primary">Label</span>
</div>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
Convert this to JSX:
<div className="card">
<div className="card-header">
<h3 className="card-title">Default Card Example</h3>
<div className="card-tools">
<span className="badge badge-primary">Label</span>
</div>
</div>
<div className="card-body">The body of the card</div>
<div className="card-footer">The footer of the card</div>
</div>
Note: Remember that in JSX, you must replace class
with className
.
Now that everything is set up, you can start your development server and see AdminLTE in action within your React components.
Run the following command to start the Vite development server:
npm run dev
Open your browser and navigate to the provided localhost URL.
You’re now ready to build out your admin dashboard using AdminLTE in a React project powered by Vite. This setup gives you the flexibility and speed of React while leveraging AdminLTE’s powerful UI components.
If you have any questions or need more detailed explanations of specific components, feel free to refer to the old AdminLTE documentation while the new documentation is being drafted, or reach out to the community!
Happy coding!
Really useful bro, thanks a lot man @CavaliereDavid
I created a react app, and installed AdminLTE with
npm i admin-lte
and everything is innode_modules
.How can i now use the theme (like use the css classes etc) without copying the
dist
folder to thepublic
folder?