# Project Name

Small description of project

## Get started

Steps to perform to run the project

```shell
npm i
```

```shell
npm run dev
```

```shell
npm run build
```

## Other things

Add project specific docs in the /docs folder and point to them from here with a
short introduction per topic.

## buflib make project checklist

Steps to take after scaffolding a project:

## Change Project Name References from Scaffold

Change name of the project in
- ./package.json
- ./build/index.html
- ./.buflib.

## Make Build System

Decide wether to use vite or webpack.

## Vite

If you want to use vite as the build system, run 
```shell
npm i -D vite @vitejs/plugin-react
```

and then

```shell
buflib make_build vite
```

then add these scripts into ./package.json:

```json
"start": "vite --config ./build/vite.config.js"
```

```json
"build": "tsc && vite build --config ./build/vite.config.js"
```

### Webpack

If you want to use webpack as the build system, run 
```shell
npm i -D webpack webpack-cli webpack-dev-server webpack-merge sass-loader style-loader css-loader babel-loader @babel/preset-react @babel/preset-env @babel/core ts-loader html-webpack-plugin
```

and then

```shell
buflib make_build webpack
```

then add these scripts into ./package.json:

```json
"start": "webpack serve --entry ./src/index.tsx --mode development --open --hot --config ./build/webpack.dev.js"
```

```json
"build": "webpack --entry ./src/index.tsx --mode production --config ./build/webpack.prod.js"
```

__Note:__ With webpack, all node modules imports in scss should be prefixed with
`~`, so you'll need to add that to the files imported from node modules in the global.scss file.

## Documentation

- Check
  [Confluence](https://bufdir.atlassian.net/wiki/spaces/BUF/pages/2149974017/Frontend)
  for file structure details.
- Check the [buflib_cli docs](https://www.npmjs.com/buflib_cli) for docs on
  buflib cli and configuring it.