Building Spotify with Elm-01

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.

$ mkdir spotify-elm && cd spotify-elm

II

$ git init && git clone [e-mail]:Johann-Goncalves-Pereira/Projects-Boilerplate.git

mv == move

$ mv ./Projects-Boilerplate/* ./

III

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

$ ./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:

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:

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.

$ code .

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

.
├── 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

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

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 for suggestions of better approaches or ideas for the site.
• Connect Discord Johann Pereira#7150
• Star the Github repository.
• Follow me on Github.

Source:

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