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