Getting Started

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.

Installation

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.

Once Node.js is installed, run npm install to install the rest of AppStack's dependencies. All dependencies will be downloaded to the node_modules directory.

npm install

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

npm start

Build tools

Start a local webserver at http://localhost:8080 and detect file changes:

npm start

Automatically detect file changes without starting a local webserver:

npm run watch

Compile, optimize, minify and uglify all source files to dist/:

npm run build

File structure

Inside the zip-file you'll find the following directories and files. Both compiled and minified distrubution files, as well as the source files are included in the package.

📁 docs - HTML demo files
📁 dist - Compiled files
- 📁 css
- 📁 js
- 📁 img
- 📁 fonts
📁 src - Source files
- 📁 scss
  - 📁 1-variables - Sass variables
  - 📁 2-mixins - Sass mixins
  - 📁 3-components - AppStack's components
  - 📁 4-utilities - Utilities/helpers
  - 📁 5-vendor - 3rd party plugin styling
  - 📄 _app.scss
  - 📄 dark.scss
  - 📄 light.scss
- 📁 js
  - 📁 modules
  - 📄 app.js
- 📁 img
- 📁 fonts
📄 .babelrc - Babel configuration file
📄 .eslintrc - ESLint configuration file
📄 .gitignore - Specifies files to ignore
📄 package.json - List of dependencies and available scripts
📄 webpack.config.js - Webpack configuration file

Basic template

This basic template can be used as a guideline for how to structure new pages while using AppStack. 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>AppStack</title>

  <link href="{PATH}/dist/css/light.css" rel="stylesheet">
</head>
<body data-theme="default" data-layout="fluid" data-sidebar-position="left" data-sidebar-behavior="sticky">
  <h1>Hello, world!</h1>

  <script src="{PATH}/dist/js/app.js"></script>
</body>
</html>

Drop jQuery

If you want to remove jQuery and all related plugins from your application, please follow these steps:

Remove all jQuery modules from the JavaScript entry file: /src/js/app.js
Remove the snippets below from the /webpack.config.js file
Run npm run build

new Webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
})

{
  test: require.resolve("jquery"),
  loader: "expose-loader",
  options: {
    exposes: ["$", "jQuery"],
  }
}