hostma/
├── node_modules
├── public
├── src/
| ├── assets/
├── |-- css/
| |-- |-- icons.css
| |-- |-- styles.css
| |-- |-- styles.css.map
| |-- |-- styles.min.css
| |-- |-- styles.min.css.map
├── |-- icon-fonts/
| |-- |-- bootstrap-icons/
| |-- |-- feather/
| |-- |-- fontawesome-free/
| |-- |-- tabler-icons/
├── |-- images/
├── |-- scss/
| |-- |-- bootstrap/
| |-- |-- custom/
| |-- |-- layouts/
| |-- |-- switcher-styles/
| |-- |-- util/
| |-- |-- _variables.scss
| |-- |-- styles.scss
├── |-- components/
| |-- |-- cloud/
| |-- |-- domain/
| |-- |-- email&productivity/
| |-- |-- homes/
| |-- |-- hosting/
| |-- |-- commonimages/
| |-- |-- indexpage/
| |-- |-- layout/
| | |-- |-- backtotop/
| | |-- |-- header/
| | |-- |-- footer/
| | |-- |-- sidebar/
| | |-- |-- switcher/
| | |-- |-- app.jsx
| | |-- |-- loginpagelayout.jsx
| | |-- |-- themestyle.jsx
| | |-- |-- underconstructionlayout.jsx
| |-- |-- loginpage/
| |-- |-- pages/
| |-- |-- registerpage/
| |-- |-- security/
| |-- |-- websites/
| |-- |-- security/
├── index.scss
├── main.jsx
├── .eslintrc.json
├── .gitignore
├── generate-react-cli.json
├── gulpfile.jsx
├── index.html
├── package-lock.json
├── package.json
└── vite.config.jshostma - React Template / : Root template folder contain all css, scss,
images
and other files.
node_modules :/ : Node.js creates this folder and puts all third party
modules listed in package.json inside of it.
css/: Folder contain assets which has complete styles.
icons-fonts/:Folder contain icons-fonts some link which is
imported in templateimages/ : Contains template images.
scss/ : Folder contain all pages scss files.
Components/ : Folder contain all innerpages components.
index.scss/ : Global Sss/Scss code.
main.jsx/ : Routing basically means navigating between pages. You
have seen many sites with links that direct you to a new page. This can be
achieved using routing.
.gitignore/ :Git configuration to make sure autogenerated files are
not commited to source control.
gulpfile.jsxGulp is a task runner that uses Node. js as a
platform. Gulp purely uses the TypeScript code and helps to run front-end tasks
and large-scale web applications. It builds system automated tasks like CSS and
HTML minification, concatenating library files, and compiling the SASS files.
index.html
The main page that is served when someone visits your site. Most of the time
you'll never need to edit it. The CLI automatically adds all tsx and css files
when building your app so you never need to add any script tags or link tags
here manually
package-lock.json
The goal of package-lock. json file is to keep track of the exact version of
every package that is installed so that a product is 100% reproducible in the
same way even if packages are updated by their maintainers. This solves a very
specific problem that package
package.json
npm configuration listing the third party packages your project uses. You can
also add your own custom scripts here.
vite.config.js
the file vite.config.ts is the stands for configuration management tools. and we
mostly use for to configure the root routing path