Skip to content

2. Setup del proyecto

Jump to bottom
Jorge Bejar edited this page Nov 9, 2022 · 8 revisions

Luego de tener el Setup inicial de manera correcta...

Creamos un nuevo proyecto

Desde una terminal corremos el siguiente comando para generar una nueva app Phoenix con LiveView instalado y configurado:

mix phx.new world_cup --live --no-ecto

Como podemos ver en la salida, se crean varias carpetas y archivos. También se instalan varias dependencias (confirmando con Y+ENTER, o simplemente ENTER) que se necesitan para la app.

Continuando con las sugerencias que se muestran en la salida, nos movemos a la carpeta del proyecto recién creado, y ejecutamos el servidor:

cd world_cup

mix phx.server

Visitamos http://localhost:4000/ desde un navegador para ver nuestra aplicación, y deberíamos poder ver lo siguiente:

Welcome page

Podemos parar el proceso presionando dos veces CTRL+C en la terminal donde corrimos el servidor.

Agregamos estilos

Para ponerle un poco de color y darle una mejor visualización a lo que vamos a ir construyendo, tenemos preparada una hoja de estilos que nos vamos a traer para nuestro proyecto.

Visitamos este link y copiamos el contenido del archivo css dentro de nuestro app.css.

Además descargamos y agregamos la imagen que allí se muestra dentro de priv/static/images.

Por último, removemos el header que se autogenera en root.html.heex al crear una aplicación Phoenix nueva para que no nos ocupe espacio innecesario en los siguientes pasos:

  <body>
-   <header>
-     <section class="container">
-       <nav>
-         <ul>
-           <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
-           <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-             <li><%= link("LiveDashboard", to: Routes.live_dashboard_path(@conn, :home)) %></li>
-           <% end %>
-         </ul>
-       </nav>
-       <a href="https://phoenixframework.org/" class="phx-logo">
-         <img
-           src={Routes.static_path(@conn, "/images/phoenix.png")}
-           alt="Phoenix Framework Logo"
-         />
-       </a>
-     </section>
-   </header>
    <%= @inner_content %>
  </body>
</html>

Nuestro primer commit en git

Usaremos Git para ir gestionando los cambios en el proyecto, haciendo commits individuales después de cada paso en el workshop. Antes de empezar a usarlo debemos configurarlo usando un nombre y cuenta de correo.

Para ello necesitamos movernos a una nueva pestaña en la consola, dado que la actual contiene el servidor. CTRL+SHIFT+T permite abrir una nueva pestaña en la consola.

Una vez allí ejecutamos lo siguiente:

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

Luego, creamos un nuevo repositorio git para nuestra aplicación.

git init

Y finalmente, nuestro primer commit.

git add .
git commit -m "Setup del proyecto"

Se puede comprobar lo que se hizo ejecutando lo siguiente:

git log

Y viendo un commit con texto "Setup del proyecto".

Check Point

Si se necesita "ponerse al día" con los pasos hasta este punto ejecutar los siguientes comandos:

# Agregar el remote si no se hizo antes
git remote add origin https://github.com/wyeworks/elixirconf-workshop-2022.git
git fetch origin

git reset --hard d8080827

Siguiente: 3. Creación de la liveview

Clone this wiki locally