Tech Blog

Basic AEK Project Directory Walk-Through

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
.buildThe .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 into your AEK project for use. npm can be used to install third party packages.
src/ The src folder is where the project’s source files are located.
.npmignoreThe .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.
package.jsonAll 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.yamlThis allows you to configure aspects of the local server. It allows you to override, customize, or add menu options and other home screen properties.
 webpack.config.jsThis allows you to configure webpack. webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
 yarn.lockYarn itself provides fast, reliable, and secure dependency management. In order to get consistent installs across machines, Yarn needs more information than the dependencies you configure in your package.json. Yarn needs to store exactly which versions of each dependency were installed. To do this Yarn uses a yarn.lock file in the root of your project.

The docs folder includes the following:

Item in DirectoryUse
pages/The pages folder can hold aek sub-screens.
pages/.npmignoreThe .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.jadeJade 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
client/Anything at the root of the client directory `/src/client/*.js` will be treated as an entry point for the webpack build. This will process source code by transpiling through BabelJS. The output file will be available at `[publicPath]/[name].js`. The screen folder will contain all the screens and components you will use in your project.
server/Everything at the root of the server directory `/src/server/*.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.

Leave a Reply