To build the PolloPollo frontend you should follow the process below.
- Ensure that you have both NodeJS and Yarn/NPM available
- (Optional) If you'd like to be able to fix linting issues, then you need to have the following available globally:
- TSLint
- TypeScript
- To get these, simply run the command
yarn global add tslint typescript
/npm i -g tslint typescript
- (Optional) If you'd like to be able to fix linting issues, then you need to have the following available globally:
- Clone the project
- Run the command
yarn install
in a terminal located at the project root - You can now use either of the two following commands to interact with the project:
yarn run start
to start a development server, ORyarn run build
to create an optimized build that is suitable for production.yarn run documentation
to extract comprehensive documentation from the front-end projectsyarn run lint
to lint the application and determine potential culprits that should be fixed before push.yarn run lintWindows
can be used on Windows in caseyarn run lint
fails
yarn run fix
to attempt to automatically fix linting issues. (This requires that you've completed step 1.1)yarn run fixWindows
can be used on Windows in caseyarn run fix
fails
To deploy the project then the command yarn run build
should be executed.
Afterwards the build folder should be uploaded to the server.
The architecture of the project is described in the subsection below.
Static content that may be used before the JavaScript bundle loads should be
contained within the public
folder.
This could be files such as .html-files, manifests and images.
Components within the application is split into three different folders, that should contain components handling a specific responsibility.
The purpose of these folders are described in the sections below.
The pages
folder contains components that the router should be able to navigate to.
The layout
folder contains components that are reuseable on several pages. E.g.
a header or footer.
The utils
folder contains components that are reuseable on several layouts and pages.
E.g. Dropdowns, Chevrons or similar content.
Models are used to define the data model used to communicate with the backend.
These should be located under the path src/ts/models
Stores are used to contain and manage all data required on the frontend, and they're
located inside the path src/ts/stores
.
All models should be contained within the Store
.
The Store
(and the models attached) are accessible throughout the whole
application via the use of function called injectStore()
.
All configurations should be located under the src/ts/config
folder and exported
via the index.ts
file located within.
Todo..