Introduction
Hostily - Luxury Hotel Next js Template
Local Development Environment Setup
In order to kickstart the development of your web src with Hostily, the very first thing is to setup an Angular development environment.
Getting Started
| Name | Description |
|---|---|
index.js |
Used for configuration of project specific settings. You can add external styles and scripts, change the output folder, add assets, add environment files and more. |
node_modules |
All external modules used are here. Do not mess with this folder, as it is auto-generated by using npm install. |
package.json |
Contains all dependencies used for production and development. |
src |
Contains all React Jsx code, assets and basically everything the end user will have access to. |
- Node.js and NPM : If NodeJS is not installed then download it from https://nodejs.org/. NPM comes bundled with Node.js
NPM Packages
- Before proceding you'll need to install npm packages. You can do this by running
npm installfrom the root of your project to install all the necessary dependencies.
Development Server
- Run
npm run devfor a dev server. Navigate to localhost:3000/. The src will autometically reload if you change any of the source files.
Building
- Run
npm run buildto build the project. The build artifacts will be stored in thebuild/directory. Use therun buildflag for a production build.
More Help
- To get more help on the
nextjsusenpm --helpor go check out the Next js Support.
Pages Info
- Home 01 (/home)
- Home 02 (/home-two)
- Home 03 (/home-three)
- About Us (/about)
- Team (/team)
- Services Details (/services-details)
- 404 Page (/404-error)
- Room Style (/room-style)
- Room Modern (/room-modern)
- Room List (/room-list)
- Room Details (/room-details)
- Blog Grid (/blog-grid)
- Blog Standard (/blog-standard)
- Blog Details (/blog-details/1)
- Contact Us (/contact)
Template Features:
- Built on React (v18.2.0)
- Attractive Homepage
- Responsive in Any Device
- Retina Ready
- Creative and Beautiful Layout
- Fast, Lightweight & Powerful
- Smooth Transition Effects
- ES6+
- Clean And Professional Coding
- Creative and Modern Design
- Bootstrap (v5.2.3)
- Simple Client-side Routing (page based)
- Google Font and Icon Used
- Integrated With IcoFont and FlatIcon
- Easily Customizable
- Well Commented Code
- Detailed Documentation
Basic Site Setting
How to change Logo ?
Change Site Title
Customize Menu
How to change Copyright ?
Dependencies
Here are the dependencies list which being used in the Hostily React Template:
"dependencies": {
"@fortawesome/react-fontawesome": "^0.2.0",
"@rcaferati/wac": "^1.0.0",
"@react-icons/all-files": "^4.1.0",
"bootstrap": "^5.3.0",
"eslint": "8.44.0",
"eslint-config-next": "13.4.9",
"instead": "^1.0.3",
"next": "13.4.9",
"nextjs-toploader": "^1.4.2",
"react": "18.2.0",
"react-awesome-slider": "^4.1.0",
"react-bootstrap": "^2.8.0",
"react-dom": "18.2.0",
"react-icons": "^4.10.1",
"react-modal-video": "^2.0.1",
"react-responsive-carousel": "^3.2.23",
"sass": "^1.67.0",
"swiper": "^10.2.0"
},
Fonts
By default, the template loads Inter and Ubuntu font from Google Web Font Services, you can change the font with the one that suits you best.
Font code can be found in the "app/styles/styles.css" file:
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
Credits
Unsplash
Burst
Feeepik
Pexels
Packages
React 18+
tslib
Bootstrap
Google Fonts