Building Spotify with Elm-01
Tags: elm, css, html, docker
Published: 2021-09-04 23:01:26

# Starting The Project:

I will try to explain everything as simply and as friendly as possible so that beginners can also understand me okay?

I have a repository with all the basics parts of a project, so we just need to clone the repository and start the same project without worries. 

*(note: I use Linux, so I’ll make Linux examples.)*

## Let's start:

The first thing that we'll do it's build our work space.

- Install all the dependencies from the first post.
  - Elm
  - Docker
  - Git
  - IDE
- Setting up the project:
  1. Make a directory to be the **root** of our project
  2. Git Init - Clone the boilerplate and move all to the **root**
  3. Start **docker compose** and check if everything is working
  4. Open IDE

### Set up project

#### I

**mkdir** serves to make a directory with this name, **&&** is equal to "and", **cd** it's just go to this directory.

```sh
$ mkdir spotify-elm && cd spotify-elm
```

#### II

```sh
$ git init && git clone git@github.com:Johann-Goncalves-Pereira/Projects-Boilerplate.git
```

mv == move

```sh
$ mv ./Projects-Boilerplate/* ./
```

#### III

The boilerplate has a script that do all the work for us, so we just need to run it.

```sh
$ ./run-docker-compose.sh 
```

Waittt, It needs to download the dependencies for us. Go drink a Coffee :) . When you come back, we should see this message:

```sh
Dev server running on http://0.0.0.0:8080
boilerplate_1  | 
boilerplate_1  | ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
boilerplate_1  | ℹ ｢wds｣: webpack output is served from /
boilerplate_1  | ℹ ｢wds｣: Content not from webpack is served from /app/run/public
boilerplate_1  | ℹ ｢wds｣: 404s will fallback to /index.html
boilerplate_1  | Running elm make /app/run/src/App/Main.elm --debug --output /tmp/202181-30-yu80vz.wo4s.js
Success!       | Compiling ...
boilerplate_1  | 
boilerplate_1  |     Main ───> /tmp/202181-30-yu80vz.wo4s.js
boilerplate_1  | 
boilerplate_1  | 
boilerplate_1  | ℹ ｢wdm｣: Compiled successfully.
```

Very simple! Now you have the Scss, Elm, and JS running with fast reload. So if you change something on the folder Stylesheet, it will auto recompile the page for you, the same with elm.

Note: If you want to change or add a folder, you'll need to edit the script on: *src/JavaScript/load_stylesheet.js*.

Just add a new route here, like this one:

```js
requireAll(require.context('../Stylesheets', true, /.*/));
```

But in any case, Open your Browser and go to the port http://0.0.0.0:8080.

You will see the boilerplate home page. You'll probably notice something like the ''debug'' on the bottom right, a **button** to page 2 and a **Shared/Local** inputs. But I won’t dive into this for now.

#### IV

Use this command to open Visual Studio Code.

```sh
$ code .
```

And now you should see this ''tree''of folders:

```sh
.
├── build
│   └── package
│       └── local
│           ├── docker-compose.yaml
│           └── Dockerfile
├── default.conf
├── elm.json
├── elm-stuff
│   └── 0.19.1
│       ├── d.dat
│       ├── i.dat
│       ├── lock
│       ├── Main.elmi
│       ├── Main.elmo
│       ├── o.dat
│       ├── Pages.elmi
│       ├── Pages.elmo
│       ├── Pages-NotFound.elmi
│       ├── Pages-NotFound.elmo
│       ├── Pages-One.elmi
│       ├── Pages-One.elmo
│       ├── Pages-Two.elmi
│       ├── Pages-Two.elmo
│       ├── Route.elmi
│       ├── Route.elmo
│       ├── Shared.elmi
│       ├── Shared.elmo
│       ├── Svg-HomeSvg.elmi
│       └── Svg-HomeSvg.elmo
├── LICENSE
├── Makefile
├── 
node_modules -> ../node_modules
├── package.json
├── package-lock.json
├── public
│   └── base.html
├── README.md
├── run-docker-compose.sh
├── scripts
│   └── run.sh
├── src
│   ├── App
│   │   ├── Main.elm
│   │   ├── Pages
│   │   │   ├── NotFound.elm
│   │   │   ├── One.elm
│   │   │   └── Two.elm
│   │   ├── Pages.elm
│   │   ├── Route.elm
│   │   ├── Shared.elm
│   │   └── Svg
│   │       └── HomeSvg.elm
│   ├── index.html
│   ├── JavaScript
│   │   ├── index.js
│   │   └── load_stylesheet.js
│   └── Stylesheets
│       ├── destroy-me.scss
│       └── index.scss
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t7pyuw3myib6x2qifm2.png)

The only part that is important for us, It’s the **src**.

```sh
src
├── App
│   ├── Main.elm
│   ├── Pages
│   │   ├── NotFound.elm
│   │   ├── One.elm
│   │   └── Two.elm
│   ├── Pages.elm
│   ├── Route.elm
│   ├── Shared.elm
│   └── Svg
│       └── HomeSvg.elm
├── index.html
├── JavaScript
│   ├── index.js
│   └── load_stylesheet.js
└── Stylesheets
    ├── destroy-me.scss
    └── index.scss
```

 
If you managed to do these steps by tomorrow, Great :). Let's start!
	
## How can you help?

- [Open issues](https://github.com/Johann-Goncalves-Pereira/Spotify-Elm/issues) for suggestions of better approaches or ideas for the site.
- Connect [Discord](discord) Johann Pereira#7150
- Star the [Github](https://github.com/Johann-Goncalves-Pereira/Spotify-Elm) repository.
- Follow me on [Github](https://github.com/Johann-Goncalves-Pereira/Spotify-Elm).

### Source:
Author: Johann Gonçalves Pereira
Reviewed by: Nathali Thiemy Motooka