You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/react-template/argon-dashboard-mui.mdx
+70-33Lines changed: 70 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,54 +8,87 @@ sidebar_label: Argon Dashboard MUI
8
8
<SubHeading>Free Dashboard Template for React and MUI, crafted by Creative-Tim</SubHeading>
9
9
10
10
Open-source **React Template** project crafted on top of **MUI**, actively supported and versioned by [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200).
11
+
It is open-source, free and it features many components that can help you create amazing websites.
30
+
31
+
<br />
32
+
18
33
## Product Information
19
34
20
-
Argon dashboard MUI is a free, open-source dashboard that is built on top of ReactJS and Material UI. It is highly customizable, and it comes with a wide range of fully coded components that can be used to create admin dashboards, user signup and sign-in pages, and profile pages. Argon dashboard MUI is a great option for developers who are looking for a powerful and versatile dashboard that is easy to use and highly customizable.
35
+
Argon dashboard MUI is a free, open-source dashboard that is built on top of ReactJS and Material UI.
36
+
It is highly customizable, and it comes with a wide range of fully coded components that can be used to create admin dashboards, user signup and sign-in pages, and profile pages.
37
+
Argon dashboard MUI is a great option for developers who are looking for a powerful and versatile dashboard that is easy to use and highly customizable.
38
+
39
+
<br />
21
40
22
41
## What is MUI
23
42
24
-
MUI stands for Material UI. It is a popular open-source React UI library that provides a wide range of pre-built components that can be used to create beautiful and functional user interfaces. MUI is based on Google's Material Design guidelines, which means that it provides a consistent and cohesive look and feel across your application.
43
+
MUI stands for Material UI. It is a popular open-source React UI library that provides a wide range of pre-built components that can be used to create beautiful and functional user interfaces.
44
+
MUI is based on Google's Material Design guidelines, which means that it provides a consistent and cohesive look and feel across your application.
25
45
26
46
MUI is easy to use and can be integrated with any React project. It is also highly customizable, so you can easily change the look and feel of your application to match your brand or style.
27
47
48
+
<br />
49
+
28
50
## How to Compile
51
+
29
52
To make use of this template, you need git installed, NodeJs (preferably a recent version) and an active internet connection
- After all project dependencies have been installed, you can run the project by executing the command
61
+
> **Install** all the project **dependencies**
62
+
63
+
- Using NPM
64
+
```bash
65
+
$ npm install
66
+
```
67
+
68
+
- Using Yar
69
+
48
70
```bash
49
-
argon-dashboard-material-ui$ npm start # for NPM
50
-
argon-dashboard-material-ui$
51
-
argon-dashboard-material-ui$
52
-
argon-dashboard-material-ui$ yarn start # for yarn
71
+
$ yarn
72
+
```
73
+
74
+
> **Start for development**
75
+
76
+
After all project dependencies have been installed, you can run the project by executing the command
77
+
78
+
```bash
79
+
$ npm start # for NPM
80
+
// OR
81
+
$ yarn start # for yarn
53
82
```
54
83
55
84
The web server will be started on port `3000`. If the webpage does not open automatically on your browser, visit [`http://localhost:3000`](http://localhost:3000)
56
85
57
-
## Integrate Docker
58
-
- Create a file named `Dockerfile` that would hold the instructions to run the application container and add the following commands
86
+
<br />
87
+
88
+
## Integrate `Docker`
89
+
90
+
> Create a file named `Dockerfile` that would hold the instructions to run the application container and add the following commands:
91
+
59
92
```
60
93
# Dockerfile
61
94
FROM node:18-alpine
@@ -72,7 +105,8 @@ COPY . .
72
105
CMD ["npm", "start"]
73
106
```
74
107
75
-
- Create a file `docker-compose.yml` that contains information about the container
108
+
> Create a file `docker-compose.yml` that contains information about the container
109
+
76
110
```yaml
77
111
# docker-compose.yml
78
112
version: '3'
@@ -97,28 +131,27 @@ node_modules
97
131
```bash
98
132
argon-dashboard-material-ui$ docker-compose up
99
133
```
100
-
After the command executes completely and the container is built, view the application on [http://localhost:3000](http://localhost:3000) using your browser. If the port number was changed, use the new port number to access the application
134
+
After the command executes completely and the container is built, view the application on [http://localhost:3000](http://localhost:3000) using your browser.
135
+
If the port number was changed, use the new port number to access the application
101
136
102
-
## Deploy on Render via CI/CD
103
-
Render is a cloud hosting company that provides developers with a fully managed platform to build, deploy, and scale their web applications. Render offers a pay-as-you-go pricing model and a wide range of features. Render is a good choice for developers who want a reliable, scalable, and affordable cloud hosting platform.
137
+
## Deploy on `Render` via CI/CD
138
+
139
+
Render is a cloud hosting company that provides developers with a fully managed platform to build, deploy, and scale their web applications.
140
+
Render offers a pay-as-you-go pricing model and a wide range of features. Render is a good choice for developers who want a reliable, scalable, and affordable cloud hosting platform.
104
141
105
142
Before deploying the web application on render, you need the repository saved on your profile. Forking the repository on GitHub gives you a copy you have read and write access
106
143
107
144
- Create an account on [Render](https://render.com/)
108
-
109
145
- Click the `New` button and select `Static Site`
110
-
111
146
- Give render access to your GitHub repositories, and select the forked repository from the list of repositories
112
-
113
147
- Select a name for your web application, and use the following values during the creation
114
-
115
148
- **Build Command**: `yarn build`
116
149
- **Publish directory**: `build`
117
-
118
150
- Click on `Create Static Site` and wait for the site to be built and served.
119
-
120
151
- The URL to the web application is found on the application dashboard, follow the link to see the deployed site
- Argon Dashboard MUI [documentation](https://www.creative-tim.com/learning-lab/material-ui/overview/argon-dashboard/?AFFILIATE=128200)
149
182
- Free [React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) - a curated list published on Dev
150
-
- [Open-source Dashboards](https://appseed.us/admin-dashboards/open-source) provided by AppSeed 
183
+
- 🚀 [Argon Dashboard MUI PRO](https://www.creative-tim.com/product/argon-dashboard-material-ui-v4?AFFILIATE=128200) - `Premium Version`
184
+
- ✅ `Enhanced UI` - more pages and components
185
+
- ✅ `Priority` on support
186
+
187
+
0 commit comments