2022-07-01 10:35:50 +02:00
|
|
|
# Build a Drum Machine
|
2022-07-01 09:41:14 +02:00
|
|
|
|
2022-07-01 10:35:50 +02:00
|
|
|
**Demo:** [drum-machine.radii.page](https://drum-machine.radii.page/)
|
|
|
|
|
|
|
|
|
|
**Profile:** [https://www.freecodecamp.org/radii](https://www.freecodecamp.org/radii)
|
|
|
|
|
|
|
|
|
|
**Project specification:** [Build a Drum Machine](https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine)
|
|
|
|
|
|
|
|
|
|
**[Tests](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js)**
|
|
|
|
|
|
|
|
|
|
## Build and deploy as:
|
|
|
|
|
|
|
|
|
|
```{bash}
|
|
|
|
|
cd drum-machine
|
|
|
|
|
npm install
|
|
|
|
|
npm run build
|
|
|
|
|
cd ..
|
|
|
|
|
DOCKER_BUILDKIT=1 docker build -t radii/drum-machine:latest -f ./dockerfile ./drum-machine/build
|
|
|
|
|
docker run -p 8081:80 -it radii/drum-machine
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Access WebApp at [http://localhost:8081](http://localhost:8081)
|
|
|
|
|
|
|
|
|
|
Note: you may replace `8081` with any other port number where you wish to make service available.
|
|
|
|
|
|
|
|
|
|
## Run tests as:
|
|
|
|
|
After building, go to to `public` sub-directory and edit `index.html` file and insert bellow code snippet immediately before closing `</body>` tag:
|
|
|
|
|
|
|
|
|
|
```{html}
|
|
|
|
|
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Than start development instance as:
|
|
|
|
|
|
|
|
|
|
```{bash}
|
|
|
|
|
npm start
|
|
|
|
|
```
|
|
|
|
|
You should now see a hamburger on top-left of page. Tap/click it than select test suite `Drum Machine`. `Run Tests` and observe results.
|
