Newer
Older
Organize a folders and files structure inside a project is never an easy task, and it exists many ways to do so.
We think that at the beginning we should just not overthink about it, choose one way to do it, keep to it, until a natural re-organization will happen if needed.
Here is our `/src` folder structure:
* `src/app/`: where the Angular code is located. With time we organized this part in different modules each taking care of one main functionnality. Here is the list of the modules:
* `core/`: constitutes the base of the application (layout, notifications, navigation history...)
* `dataset-details/`: contains the components and logic allowing the display of a dataset information (metadata, data, map...)
* `datasets/`: contains the components and some of the logic related to the research
* `editorialisation/`: contains the components and logic related to the display of editorial content (static pages, articles)
* `elasticsearch/`: provides an interface to the elasticsearch service and contains all the logic needed to access the data indexed in elasticsearch (data sets, pages, articles)
* `map/`: contains the components and logic allowing the display and manipulation of a map
* `shared/`: provides components, directives and others things that can be reused in any module of the application
* `user/`: contains the components and logic related to the user management in the application (login, logout, user profil...)
* `src/assets/`: contains all the images, favicon, svg, fonts, dynamic config file...
* `src/environments/`: contains files with static configuration.
* `src/i18n/`: this folder is dedicated to the translation. The are two types of files:
* `.xlf`: for static texts written in html files
* `.ts`: for dynamic texts retrieved by HTTP calls
* `src/scss/`: contains the main stylesheets of the application
* `src/routes.ts`: contains the translation of the different url fragments of all the application
All the styling work has been done with [Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox.
It is highlighy customizable and easy to integrate in a project.
In order to override the default Bulma style, we added a `init_bulma.scss` file that redefines some of the Bulma variables (color, padding, anything you want). In this file, we also import a `variables.scss` file which contains our custom scss variables and Bulma scss files. Finally `init_bulma.scss` is imported in `styles.scss` which is the main scss file of the app.