Quick start

Get started with AdminKit in no time. Learn how to detect file changes, start a dev-server and compile the files with Webpack.

TIP

Note: If you're not looking for any customizations or are not comfortable with Node.js or Webpack, you could use the pre-compiled (ready-to-use) files available in the dist folder. In that case, you can skip the set-up below.

Prerequisites

The theme includes a custom Webpack file, which can be used to quickly recompile and minify theme assets while developing or for deployment. You'll need to install Node.js before using Webpack.

Installation

Once Node.js is installed, clone our repo (or download AdminKit PRO) and run npm install to install the rest of AdminKit's dependencies. All dependencies will be downloaded to the node_modules directory.

Usage

Now you're ready to modify the source files and generate new dist/ files. AdminKit is using webpack and webpack-dev-server to automatically detect file changes and start a local webserver at http://localhost:8080.

# serve with hot reload at localhost:8080
$ npm start

# detect file changes without starting a local webserver
$ npm run watch

# compile, optimize, minify and uglify all source files to /dist
$ npm run build

Starter template

This starter template can be used as a guideline for how to structure new pages while using AdminKit. Some meta tags and our CSS & JS files are included inside the template.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
 
  <title>AdminKit</title>
 
  <!-- AdminKit CSS file -->
  <link href="PATH/dist/css/app.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, world!</h1>
 
  <!-- AdminKit JS file -->
  <script src="PATH/dist/js/app.js"></script>
</body>
</html>