Setup Development Environment
In order to kickstart the development of your web app with ProHealth, the very first thing you need to do is to setup a next-js development environment.
Following tools are needed to setup a react dev environment:
- Node JS
NodeJS works as a node package manager behind the scene. It is recommended to download and install the latest version of Node JS from its official site http://nodejs.org/
Introduction
To install ProHealth on your local matchin, download the files from Themeforest and unzip them to the local
disk on your computer.
Inside the extracted folder you will see two folders named
'ProHealth-documentation' and 'ProHealth-next'.
Open 'ProHealth-next' with a code editor like vscode. And follow
the stapes below-
Open vscode terminal
Then run : npm install
Then run : npm run dev
Now in the browser go localhost:3000
Open vscode terminal
Then run : yarn install
Then run : yarn run dev
Now in the browser go localhost:3000
Introduction
- public - All static files
- images - All images for this template
- src/app - Content all the next file
- scss - Common SCSS file
- ui - All components
- layout.js - Starting poing of next components
- package.json - All packages have information
- node_modules - After install ProHealth you can seee this folder, this folder content all installed package.
Pages and Components Info
- Home (/src/app/(default-layout)/page.jsx)
- Home Version-2 (/src/app/home-v2/page.jsx)
- Home Version-3 (/src/app/home-v3/page.jsx)
- Home Version-4 (/src/app/home-v4/page.jsx)
- Home Version-5 (/src/app/home-v5/page.jsx)
- Home Version-6 (/src/app/home-v6/page.jsx)
- Home Version-7 (/src/app/home-v7/page.jsx)
- About (/src/app/(default-layout)/about/page.jsx)
- Doctors (/src/app/(default-layout)/doctors/page.jsx)
- Doctor Details (/src/app/(default-layout)/doctors/doctor-details/page.jsx)
- Appointments (/src/app/(default-layout)/appointments/page.jsx)
- Departments (/src/app/(default-layout)/departments/page.jsx)
- Department Details (/src/app/(default-layout)/departments/department-details/page.jsx)
- Blog (/src/app/(default-layout)/blog/page.jsx)
- Blog Details (/src/app/(default-layout)/blog/blog-details/page.jsx)
- PricingPlan (/src/app/(default-layout)/pricing-plan/page.jsx)
- Timetable (/src/app/(default-layout)/timetable/page.jsx)
- Contact (/src/app/(default-layout)/contact/page.jsx)
- Gallery (/src/app/(default-layout)/gallery/page.jsx)
- Error Page (/src/app/not-found.jsx)
Common Components:
- Header (/src/app/ui/header)
- Footer (/src/app/ui/footer)
Template Features:
- ES6+
- Next JS 15+
- React JS 19+
Dependencies
Here are the dependencies list which being used in the ProHealth React Template:
"dependencies": {
"@iconify/react": "^6.0.2",
"bootstrap": "^5.3.8",
"html-react-parser": "^6.0.1",
"next": "^15.5.4",
"react": "^19.2.5",
"react-datepicker": "^9.1.0",
"react-dom": "^19.2.5",
"react-masonry-css": "^1.0.16",
"react-modal-image": "^2.6.0",
"react-slick": "^0.31.0",
"sass": "^1.99.0",
"slick-carousel": "^1.8.1"
},
Fonts
By default, the template loads Poppins and Figtree font from Google Web Font Services, you can change the font with the one that suits you best.
You will find the font code in the "scss/default/_typography.scss
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
Icons
We use Iconify package for icon.
For use Iconify, go to Iconify site, search your icon, select react and use that react
component.
Deploy
For deploy first run the command npm run build or yarn build
Now you will get build folder.
Using an FTP Client (such as Filezilla or Total Commander), you will need to upload all of the contents of the
'build' folder to your server.
Credits
Freepick
Unsplash
FlatIcon
Packages
react
react-dom
next
sass
Bootstrap
html-react-parser
react-slick
slick-carousel
React Water Wave
React Datepicker
React Modal Image
@iconify/react
react-masonry-css
Support
If you have any questions, please use our profile contact form on
Envato (
https://themeforest.net/user/Laralink
) Or direct email us on laralink007@Laralink.com.
We aim to answer all questions within 2 days . In
some cases the waiting time can be extended to
4 days.