Skip to content

Folder Structure

Getting to know your project directory

After creation, your project should look something like this:

my-roar-app
├── .eslintrc.json
├── .git/
├── .gitignore
├── LICENSE
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src/
│   ├── css/
│   │   └── roar.css
│   ├── config.js
│   ├── firebaseConfig.js
│   ├── index.js
│   ├── loadAssets.js
│   └── logger.js
└── webpack.config.js

Folder contents may vary depending on which template you used. Here is a description of the various files in your project:

🖊 Files you have to edit

  • src/index.js:

    This file contains your experiments primary source code. See Writing Your Experiment for more details.

  • src/loadAssets.js:

    This file loads media, such as images, videos, and audio, that is needed for your stimuli. See Writing Your Experiment for further details.

✏ Files you probably should edit

Files you may edit but probably won't need to

  • src/config.js:

    This file contains experiment configuration details and code that helps your experiment communicate with the participant dashboard and the Firestore database. See Configuration for more details.

  • src/firebaseConfig.js:

    This file contains additional configuration information to help your app communicate with the Firestore database. See Configuration for more details.

  • src/logger.js:

    The JavaScript code in this file implements a logger to write debugging information to the console.

  • src/css/roar.css:

    This Cascading Style Sheet file describes how the HTML elements in your web experiement are to be displayed. See the styling section for more information on editing this file.

  • .gitignore:

    This file tells git which files and directories to ignore when you make commits. Read more in the Git Handbook. You might want to add to this file if you create new files in your applications folder but do not want to commit this to your git repository.

  • .eslintrc.json:

    Your new ROAR app uses ESLint to make your code more consistent and avoid bugs. This file is an ESLint configuration file that specified some of the options for ESLint. You should not have to edit this file.

  • LICENSE:

    The LICENSE file for your app. By default, all ROAR apps adopt the Stanford Academic Software License For ROAR™. See the licensing page for more information.

  • package.json:

    This is npm's configuration file. Read more here. Among other things, it stores metadata about your project. It should be populated based on the answers you provided when creating your ROAR app. Usually, you won't need to edit this file. We recomment that you install dependencies using npm rather than editing this file directly.

⛔ Files you should not edit

  • .git/:

    This folder contains all of the information that is necessary for version control of your project using git. This folders contents are explained in more detail in the git documentation. You do not need to understand, nor should you edit, the .git folder to create your ROAR app.

  • node_modules:

    Think of this as a cache for the external JavaScript modules/libraries that your ROAR app depends on. Do not edit this folder.

  • package-lock.json:

    This file specifies the exact dependency tree for your application. Find out more here. Do not edit this file.

  • webpack.config.js:

    Webpack is a "module bundler." It takes your source code files and transforms them for deployment and usage in a web browser. The webpack.config.js file configures how webpack bundles your files. You do not need to understand how these files work in order to build your ROAR application.

Adding and removing files

For the project to build, you must have an index.js file in your src directory. If you know what you're doing, you can delete or rename the other files in src.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.

You can create more top-level directories. They will not be included in the production build so you can use them for things like documentation or creation of custom stimuli.