File Structure

This reference page describes the default file structure used by default in Deskpro apps.

For apps created via the create-react-app command, your file structure looks like this.

• /public

  • assets/ -- Anything in assets is copied into your bundle as-is. You can reference files in here via relative paths. Note that it's generally pretty uncommon to have many assets because they are usually included into your JS files and bundled into a production build.

    • icon.png -- This is a special file that is always used as the icon for your app. The default icon is a monochrome black Deskpro logo.

  • index.html -- The main entry into your app. The index.js script is added to this file automatically. You usually never need to modify this file, but you can if you need to!

• src/ -- Is where your application files exist: Javascript, styling such as CSS, images, etc. Files in this directory are managed by the build process.

  • index.js -- This is the main entry point of your application. You usually never have to modify this file from the default which just loads your App component and mounts it.

  • App.js -- By default, the index.js file includes your App component. It's a good idea to stick with this convention. Your App component can then include all other components, all of your logic, etc.

  • styles.css -- You can add custom styling here. There is nothing special about this file other than it's included by default in App.js. You can delete it or rename it if you want (provided you edit the import from your App.js too).

  • ADMIN_README.md -- This is a readme file (written in Markdown) that will display in the Deskpro admin interface when an administrator goes to install your app.

• test/ -- Is where your tests and mocked data live.

  • helpdeskStub.js and helpdeskScenarios/ -- This is the data used in the dev environment. You can read more about <<TODO link to page>>.

  • unit/ -- This is where you can place your tests. Jest is ready to go with snapshot testing.

• package.json -- This is a standard npm package.json file but it also includes a deskpro key which describes how your app should work. Refer to the manifest reference for details. <<TODO link to page>>

• README.md -- This is included by default but has no special use with apps. It's a good idea to keep it around though because most version control sites (GitHub, BitBucket etc) render this readme file by default. Note that this is completely unrelated from ADMIN_README.md described above; this file would typically only ever be seen by developers.

You might see some other build or environmental files too:

• node_modules/ -- This is third-party dependencies installed by npm.

• build/ -- This is build artefacts from building or running the app.

  • For example, when building a production version, your app.zip file is placed in here.