Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the application build tools. Download the latest version of Node and install it: nodejs.org/en/download/
Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.
npm install npm@latest -g
Verify that npm in successfully installed, and version of installed npm will appear.
npm --version
Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.
npm install gulp-cli -g
If you have previously installed a version of gulp
globally, please remove it to make sure old version doesn't collide with new gulp-cli
npm rm --global gulp
Verify that gulp in successfully installed, and version of installed gulp will appear.
gulp --version
NPM packages are a great way to ensure your files are up to date and everyone in your development tree is using the same version for the files. To install the npm you simple type:
npm install
Check outdated files and versions by typing:
npm outdated
If you are updating the npm packages, please be sure to read their changelogs for any breaking changes before you do any major update. To update a package, simple open your package.json file and change the version number run npm i
command
Once all your NPM packages are installed you can now run the command to build your project. The build project will compile your project and create the necessary HTML files, CSS, and JS scripts related for each page. Once the compilation is completed, gulp will switch to 'watch' mode and watch for changes in your JS/HBS templates/SCSS files. Any changes you make, gulp will auto compile the project in seconds.
gulp build
Once the compilation is complete, you can go to http://localhost:4000 to view your compiled project
Gulp watch will initialize the file watch process and start the server
gulp watch
Gulp build-nav will build the _nav.hbs file from your nav.json file
gulp build-nav
build.json
. You can completely slim down your project through the build.json file.
variable | value | description |
---|---|---|
config.debug |
boolean
|
spits out debugging data and error messages on npm log file |
config.data.* |
string
|
global data for the template, control profile images, user names, etc |
config.compile.jsUglify |
boolean
|
minifies all javascript files in the project |
config.compile.cssMinify |
boolean
|
minifies all css files in the project |
config.compile.jsSourcemaps |
boolean
|
generates js source maps from the scss files for easier debugging options using the browser's inspection tool |
config.compile.cssSourcemaps |
boolean
|
generates css source maps from the scss files for easier debugging options using the browser's inspection tool |
config.compile.autoprefixer |
boolean
|
we recommend you leave this set to true. This will auto-generate all the necessary CSS browser prefixes for different browser types |
config.compile.seedOnly |
boolean
|
generates the seed project navigation menu, all other assets will be intact, can be removed manually (but will not be called into the main project) |
config.path.* |
string
|
addresses source and dist path of your porject files, change this if you change your source file path |
build.vendor.* |
string
|
link all sources for plugins from the node_modules directory, you can concatinte files here and also rename them if needed |
build.app.* |
string
|
concatinates all the main core files for the theme |
app.config.js
mainly controls the behaviour of your application, you can configure the navigation speed, disable visual effects, and change localstorage settings.
variable | value | description |
---|---|---|
myapp_config.VERSION |
integer
|
application version number |
myapp_config.root_ |
string
|
used for core app reference |
myapp_config.root_logo |
boolean
|
used for core app reference to detect logo click behaviour |
myapp_config.throttleDelay |
boolean
|
for window.scrolling & window.resizing |
myapp_config.filterDelay |
boolean
|
keyup.functions for the search filter |
myapp_config.mobileResolutionTrigger |
boolean
|
the resolution when the mobile activation fires |
myapp_config.debugState |
boolean
|
outputs debug information on browser console |
myapp_config.rippleEffect |
boolean
|
global configuration for material design effect that appears on all buttons |
myapp_config.mythemeAnchor |
string
|
this anchor is created dynamically and CSS is loaded as an override theme |
myapp_config.navAnchor |
string
|
this is the root anchor point where the menu script will begin its build |
myapp_config.navAccordion |
string
|
nav item when one is expanded the other closes |
myapp_config.navSpeed |
integer
|
the rate at which the menu expands revealing child elements on click, lower rate reels faster expansion of nav childs |
myapp_config.navClosedSign |
string
|
main nav close sign |
myapp_config.navOpenedSign |
string
|
main nav open sign |
myapp_config.storeLocally |
boolean
|
saveSettings to localStorage, to store settings to a DB instead of LocalStorage use initApp.pushSettings("className1 className2") |
All support questions related to HTML and/or CSS will be honored. Issues that are encountered on the Seed versions of specific flavors of SmartAdmin are covered by their respective authors, but will be limited to HTML and/or CSS issues. If you need assistance with a technical issue that is currently not covered by the FAQ, you will need to have purchased a Full license of that flavor and contact the respective author for further assistance. The Full version links will be added to the Flavors page once they are made available.