Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

Basic AEK Project Directory Walkthrough

Payton Pietron on October 3rd, 2017

This blog will walk you through the directory of a basic AEK project, describing what each part does. A screenshot of a basic AEK project is also included for clarity. The tables below include descriptions of what is included in the root of the project, the docs folder, and the src folder. 

 

Tree of a basic AEK project:

 

The root of the basic project includes the following:

Item in DirectoryUse
.build               

The .build folder contains transpiled css and ECT files, as well as bundled JavaScript. 

docs/

This folder can be used to store documentation outside of the README file that is included in the project. You can also use this area to store tests. 

node_modules/

The node_modules folder is a folder of packages. It comes from Node Package Manager (npm). These packages can be loaded with require(“package-name”). npm can be used to install third party packages. 

public/

The public folder is a folder that shares information with others. 

src/

The src folder is where the project’s source files are located. 

.eslintrc

ESLint is a pluggable linting utility for JavaScript and JSX. A linter is a tool that flags suspicious usage in software written in any language. You can configure your linter in this file. Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn’t recognize. To account for this, eslint-plugin-react is used. 

.npmignore

The .npmignore file is mainly used to avoid packaging files in your project that you don’t need to be downloaded by a client who wants to consume your package. 

gulpfile.js

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. You can automate these tasks within the gulpfile.js. 

package.json

All npm packages contain a file, usually in the project root, called package.json. This file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies. 

readme.md

The README file contains info about other files in the directory. This file is meant to be replaced by the user with useful information about their specific project.

runserver.yaml

This allows you to configure aspects of the local server. It allows you to override, customize, or add menu options and other home screen properties. 

 

The docs folder includes the following:

Item in Directory

Use
pages/

The pages folder holds aek sub-screens. 

pages/.npmignore

The .npmignore file is mainly used to avoid packaging files in your project that you don’t need to be downloaded by a client who wants to consume your package. 

_layout.jade 

Jade is a templating engine, primarily used for server-side templating in NodeJS. Jade gives you a powerful new way to write markup, with a number of advantages over plain HTML.

 

The src folder includes the following:

Item in DirectoryUse
css/

Anything at the root of the css directory `/src/css/[name].*` will be treated as an entry point for the AEK css buildtool. This will process the source code by transpiling any less (`[name].less`) and stylus (`[name].styl`). The output of this, along with any `[name].css` files will be passed on to autoprefixer post processing (this adds vendor prefixes to css properties). In development, the result is supplemented with source mapping, in production, it is minified. The output file will be available at `[publicPath]/css/[name].css`. The boilerplate contains a default stylesheet that uses the aek-css framework to provide a number of css components. You can configure colors, etc. in `/aek-css-config.styl`.

js/

Anything at the root of the js directory `/src/js/[name].*` will be treated as an entry point for AEK webpack buildtool. This will process source code by transpiling any `[name].es6.js` or `[name].jsx` files with BabelJS, and any `*.coffee` files through CoffeeScript. The webpack buildtool can also process less, stylus, and css as css modules which are injected into the document with a styl-loader. Again, source maps are applied and production assets are minified. The output file will be available at `[publicPath]/js/[name].js`. The boilerplate includes some basic `.jsx` code that demonstrates some of the available React components.

screens/

Everything at the root of the screens directory `/src/screens/*.ect` will be treated as an ECT template. The output from the ECT process will provide either raw HTML (for disconnected screens), or the Twig code that is sent to the server (for connected screens). "Disconnected" screens are served locally. "Connected" screens can include twig server-side processing and are served via the campusM servers. To "connect" a screen set a `connected:true` property in the `@configure` section in the screen code.