AdminKit

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.

sh
# 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.

html
<!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>