Note:
Hyper offers enhanced real-time customization of your
layout through the use of CSS variables, which are set
via Sass.
If you are not familiar with Node.js and Gulp, don't
worry. We've provided a ready-to-use (pre-compiled)
version of Hyper in the dist folder, which
you can use without any additional setup steps. However,
if you want to take full advantage of Hyper's
customization options, we recommend following the setup
steps below to install Node.js and Gulp and build your
own version of the template.
We utilize Gulp to automate our build flow, allowing for complete automation of our development workflows. Gulp is a powerful toolkit designed to help developers eliminate time-consuming tasks, allowing them to focus on what really matters: building great products. If you're not familiar with Gulp, you can learn more about it here.
Prerequisites
To get started with Hyper, please follow the steps below to install and set up all the necessary prerequisites:
-
Node.js - v16x or v18x
To use our build tools and take full advantage of Hyper's customization options, you will need to download and install Node.js. If you do not have Node.js v16.x or v18.x installed already, you can download the package installer from the official website. We recommend that you download the stable version of Node.js (LTS) to ensure the best possible experience.
Download Node.js -
Git
Ensure that you have Git installed and running on your system.
Install Git -
Gulp & Gulp CLI
Ensure that you have Gulp installed and running on your computer. If you already have Gulp installed, you can skip this step. If not, you can install it by running the following command from your terminal:
npm install -g gulp@4.0.1. -
Yarn
Ensure that you have Yarn installed and running on your computer. If you already have Yarn installed, you can skip this step.
Installation
To install all the required dependencies for the template,
open your terminal, navigate to the folder where you have
the Hyper files, and run the command
yarn install. This will install all necessary
dependencies in the node_modules folder. Once
the installation is complete, you are ready to run Hyper
for the first time.
You can run the following commands to run projects locally: Or build for production use:
| Command | Description |
|---|---|
gulp |
The Hyper development environment enables you to choose a demo using the keyboard arrow keys, and it then launches the development server. The server will monitor changes to your demo code, including HTML, JavaScript, and Sass. Once the server is running, you can access it at http://localhost:3000. |
gulp build |
The gulp build command compiles the source code for the selected demo (using the keyboard arrow up/down keys) and bundles it with production mode optimization for the best performance. The compiled version of the code will be available inside the dist folder. This command is typically used when you are ready to build and deploy your project for production use. |
Troubleshooting
-
If you encounter the error message "
Error: ENOENT: no such file or directory, scandir '/root/website/node_modules/node-sass/vendor'" while running npm install, there are a couple of things you can try to resolve it:-
1. Run
npm rebuild node-sassto re-install node-sass -
2. Delete node_modules folder and re run
npm install
-
1. Run