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
@@ -15,59 +15,136 @@ Open-source **React Template** project crafted on top of **MUI**, actively suppo
15
15
:::info **v3.0.0** - Release date `2022-06-24`
16
16
:::
17
17
18
-
> @Todo Content
19
-
20
-
- General Product Information
21
-
- where we can use it
22
-
- What is MUI
23
-
- short intro
24
-
- How to compile the product
25
-
- How to Dockerize the product
26
-
- How to Deploy the product using CI/CD on render
27
-
- Screen-Shots + pages info
28
-
- 800x600 px
29
-
- 5 pages (saved on GitHub) with some basic input
30
-
- Conclusion & Resources
31
-
- A closing sentence and some links for the audience
32
-
33
-
<br />
34
-
35
18
## Product Information
36
19
37
-
@Todo
38
-
39
-
<br />
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.
40
21
41
22
## What is MUI
42
23
43
-
@Todo
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.
44
25
45
-
<br />
26
+
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.
46
27
47
-
## How to Compile
28
+
## How to Compile
29
+
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
48
+
```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
53
+
```
54
+
55
+
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)
52
56
53
57
## Integrate Docker
58
+
- Create a file named `Dockerfile` that would hold the instructions to run the application container and add the following commands
59
+
```
60
+
# Dockerfile
61
+
FROM node:18-alpine
62
+
63
+
WORKDIR /app
64
+
65
+
COPY package.json .
66
+
COPY package-lock.json .
67
+
68
+
RUN npm install
69
+
70
+
COPY . .
71
+
72
+
CMD ["npm", "start"]
73
+
```
74
+
75
+
- Create a file `docker-compose.yml` that contains information about the container
76
+
```yaml
77
+
# docker-compose.yml
78
+
version: '3'
79
+
services:
80
+
argon_app:
81
+
container_name: argon_dashboard_mui
82
+
build: .
83
+
restart: always
84
+
ports:
85
+
- 3000:3000
86
+
```
87
+
If port 3000 is in use on your device, change the first port number under `ports` to a different number e.g. `3001:3000`.
88
+
89
+
- Create a `.dockerignore` file to exclude some folders from the docker file commands
90
+
```bash
91
+
# .dockerignore
92
+
.git
93
+
node_modules
94
+
```
95
+
96
+
- All the files needed to create a docker container are present, execute the command below to create a docker container
97
+
```bash
98
+
argon-dashboard-material-ui$ docker-compose up
99
+
```
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
54
101
55
-
@Todo
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.
104
+
105
+
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
+
107
+
- Create an account on [Render](https://render.com/)
108
+
109
+
- Click the `New` button and select `Static Site`
110
+
111
+
- Give render access to your GitHub repositories, and select the forked repository from the list of repositories
112
+
113
+
- Select a name for your web application, and use the following values during the creation
114
+
115
+
- **Build Command**: `yarn build`
116
+
- **Publish directory**: `build`
117
+
118
+
- Click on `Create Static Site` and wait for the site to be built and served.
119
+
120
+
- The URL to the web application is found on the application dashboard, follow the link to see the deployed site
0 commit comments