|
1 | | -# ⚙️ Project Configuration |
2 | | - |
3 | | -The application has been bootstrapped using [create-awesome-python-app](https://pypi.org/project/create-awesome-python-app/) for simplicity reasons. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc. |
4 | | - |
5 | | -You should always configure and use the following tools: |
6 | | - |
7 | | -## ESLint |
8 | | - |
9 | | -ESLint is a linting tool for JavaScript. By providing specific configuration defined in the`eslint.config.mjs` file it prevents developers from making silly mistakes in their code and enforces consistency in the codebase. |
10 | | - |
11 | | -[ESLint Configuration](../eslint.config.mjs) |
12 | | - |
13 | | -## Prettier |
14 | | - |
15 | | -This is a great tool for formatting code. It enforces a consistent code style across your entire codebase. By utilizing the "format on save" feature in your IDE you can automatically format the code based on the configuration provided in the `.prettierrc.js` file. It will also give you good feedback when something is wrong with the code. If the auto-format doesn't work, something is wrong with the code. |
| 1 | +# ⚙️ Project Configuration |
| 2 | + |
| 3 | +The application has been bootstrapped using [create-awesome-python-app](https://pypi.org/project/create-awesome-python-app/) for simplicity reasons. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc. |
| 4 | + |
| 5 | +You should always configure and use the following tools: |
| 6 | + |
| 7 | +## ESLint |
| 8 | + |
| 9 | +ESLint is a linting tool for JavaScript. By providing specific configuration defined in the`eslint.config.mjs` file it prevents developers from making silly mistakes in their code and enforces consistency in the codebase. |
| 10 | + |
| 11 | +[ESLint Configuration](../eslint.config.mjs) |
| 12 | + |
| 13 | +## Prettier |
| 14 | + |
| 15 | +This is a great tool for formatting code. It enforces a consistent code style across your entire codebase. By utilizing the "format on save" feature in your IDE you can automatically format the code based on the configuration provided in the `.prettierrc.js` file. It will also give you good feedback when something is wrong with the code. If the auto-format doesn't work, something is wrong with the code. |
| 16 | + |
| 17 | +[Prettier Configuration](../.prettierrc.js) |
| 18 | + |
| 19 | +## TypeScript |
| 20 | + |
| 21 | +ESLint is great for catching some of the bugs related to the language, but since JavaScript is a dynamic language ESLint cannot check data that run through the applications, which can lead to bugs, especially on larger projects. That is why TypeScript should be used. It is very useful during large refactors because it reports any issues you might miss otherwise. When refactoring, change the type declaration first, then fix all the TypeScript errors throughout the project and you are done. One thing you should keep in mind is that TypeScript does not protect your application from failing during runtime, it only does type checking during build time, but it increases development confidence drastically anyways. Here is a [great resource on using TypeScript with React](https://react-typescript-cheatsheet.netlify.app/). |
| 22 | + |
| 23 | +## Husky |
| 24 | + |
| 25 | +Husky is a tool for executing git hooks. Use Husky to run your code validations before every commit, thus making sure the code is in the best shape possible at any point of time and no faulty commits get into the repo. It can run linting, code formatting and type checking, etc. before it allows pushing the code. You can check how to configure it [Husky documentation](https://typicode.github.io/husky/#/?id=usage). |
| 26 | + |
| 27 | +## Absolute imports |
| 28 | + |
| 29 | +Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as `../../../Component`. Wherever you move the file, all the imports will remain intact. Here is how to configure it: |
| 30 | + |
| 31 | +For JavaScript (`jsconfig.json`) projects: |
| 32 | + |
| 33 | +```json |
| 34 | +"compilerOptions": { |
| 35 | + "baseUrl": ".", |
| 36 | + "paths": { |
| 37 | + "@/*": ["./src/*"] |
| 38 | + } |
| 39 | + } |
| 40 | +``` |
| 41 | + |
| 42 | +For TypeScript (`tsconfig.json`) projects: |
| 43 | + |
| 44 | +```json |
| 45 | +"compilerOptions": { |
| 46 | + "baseUrl": ".", |
| 47 | + "paths": { |
| 48 | + "@/*": ["./src/*"] |
| 49 | + } |
| 50 | + } |
| 51 | +``` |
| 52 | + |
| 53 | +[Paths Configuration](../tsconfig.json) |
| 54 | + |
| 55 | +It is also possible to define multiple paths for various folders(such as `@/components`, `@/hooks`, etc.), but using `@/*` works very well because it is short enough so there is no need to configure multiple paths and it differs from other dependency modules so there is no confusion in what comes from `node_modules` and what is our source folder. That means that anything in the `src` folder can be accessed via `@`, e.g some file that lives in `src/components/MyComponent` can be accessed using `@/components/MyComponents`. |
16 | 56 |
|
17 | | -[Prettier Configuration](../.prettierrc.js) |
| 57 | +## uv |
18 | 58 |
|
19 | | -## TypeScript |
| 59 | +[uv](https://docs.astral.sh/uv/) is the Python package/project manager used by this |
| 60 | +repository (and by `create-awesome-python-app` scaffolds). It manages the virtual |
| 61 | +environment, dependencies, and tool versions: |
20 | 62 |
|
21 | | -ESLint is great for catching some of the bugs related to the language, but since JavaScript is a dynamic language ESLint cannot check data that run through the applications, which can lead to bugs, especially on larger projects. That is why TypeScript should be used. It is very useful during large refactors because it reports any issues you might miss otherwise. When refactoring, change the type declaration first, then fix all the TypeScript errors throughout the project and you are done. One thing you should keep in mind is that TypeScript does not protect your application from failing during runtime, it only does type checking during build time, but it increases development confidence drastically anyways. Here is a [great resource on using TypeScript with React](https://react-typescript-cheatsheet.netlify.app/). |
| 63 | +```bash |
| 64 | +uv sync # create the venv and install all dependencies |
| 65 | +uv add <pkg> # add a runtime dependency |
| 66 | +uv add --dev <pkg> # add a development dependency |
| 67 | +uv run <cmd> # run a command inside the project venv |
| 68 | +``` |
22 | 69 |
|
23 | | -## Husky |
| 70 | +Never use `pip install` directly — the lockfile (`uv.lock`) is the source of |
| 71 | +truth for the environment. |
24 | 72 |
|
25 | | -Husky is a tool for executing git hooks. Use Husky to run your code validations before every commit, thus making sure the code is in the best shape possible at any point of time and no faulty commits get into the repo. It can run linting, code formatting and type checking, etc. before it allows pushing the code. You can check how to configure it [Husky documentation](https://typicode.github.io/husky/#/?id=usage). |
| 73 | +## pyproject.toml |
26 | 74 |
|
27 | | -## Absolute imports |
| 75 | +`pyproject.toml` is the single configuration file for the Python side of the |
| 76 | +project. It declares: |
28 | 77 |
|
29 | | -Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as `../../../Component`. Wherever you move the file, all the imports will remain intact. Here is how to configure it: |
| 78 | +- **Project metadata** — name, version, description, authors |
| 79 | +- **Dependencies** — the runtime dependency list (managed by `uv add`) |
| 80 | +- **Tool configuration** — settings for linters/formatters/tests (e.g. `ruff`, |
| 81 | + `pytest`) live under their own `[tool.*]` tables |
30 | 82 |
|
31 | | -For JavaScript (`jsconfig.json`) projects: |
| 83 | +When adding a new dependency or a new tool, edit `pyproject.toml` (prefer |
| 84 | +`uv add` for dependencies so the lockfile stays in sync) rather than |
| 85 | +scattering config across ad-hoc files. |
32 | 86 |
|
33 | | -```json |
34 | | -"compilerOptions": { |
35 | | - "baseUrl": ".", |
36 | | - "paths": { |
37 | | - "@/*": ["./src/*"] |
38 | | - } |
39 | | - } |
40 | | -``` |
| 87 | +## Environment variables (`.env`) |
41 | 88 |
|
42 | | -For TypeScript (`tsconfig.json`) projects: |
| 89 | +Runtime configuration lives in environment variables, with a committed |
| 90 | +`.env.example` as the template: |
43 | 91 |
|
44 | | -```json |
45 | | -"compilerOptions": { |
46 | | - "baseUrl": ".", |
47 | | - "paths": { |
48 | | - "@/*": ["./src/*"] |
49 | | - } |
50 | | - } |
| 92 | +```bash |
| 93 | +cp .env.example .env # create your local copy (`.env` is gitignored) |
51 | 94 | ``` |
52 | 95 |
|
53 | | -[Paths Configuration](../tsconfig.json) |
54 | | - |
55 | | -It is also possible to define multiple paths for various folders(such as `@/components`, `@/hooks`, etc.), but using `@/*` works very well because it is short enough so there is no need to configure multiple paths and it differs from other dependency modules so there is no confusion in what comes from `node_modules` and what is our source folder. That means that anything in the `src` folder can be accessed via `@`, e.g some file that lives in `src/components/MyComponent` can be accessed using `@/components/MyComponents`. |
| 96 | +Never commit real secrets into `.env` — only the example file is tracked. To |
| 97 | +add a new variable: add it to `.env.example` with a one-line comment, read it |
| 98 | +in code via `os.environ.get("NAME")` (or your config loader), and document it |
| 99 | +in the docs. |
0 commit comments