Skip to content

Commit 54b8a4e

Browse files
brauliodiezbrauliodiez
committed
updates
1 parent 5581fd8 commit 54b8a4e

686 files changed

Lines changed: 16762 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# build output
2+
dist/
3+
# generated types
4+
.astro/
5+
6+
# dependencies
7+
node_modules/
8+
9+
# logs
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store
22+
23+
# jetbrains setting folder
24+
.idea/

04-frameworks/15-astro/01-creando-proyecto/miblog/.prettierrc renamed to 04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/.prettierrc

File renamed without changes.

‎04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/Readme.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Creación y estructura de un proyecto Astro
2+
3+
## Prerrequisitos
4+
5+
Nos arrancamos a desarrollar con Astro, para ello utilizaremos nuestro querido Visual Studio Code y mi recomendación es que te instales el plugin de Astro para VSCode.
6+
7+
![Pantallazo con el Plugin oficial de Astro en VSCode](./content/astro-plugin.jpg)
8+
9+
## Crear un nuevo proyecto Astro
10+
11+
Para crear un nuevo proyecto Astro, podemos seguir las instrucciones de su web oficial y usar el siguiente comando en tu terminal:
12+
13+
```bash
14+
npm create astro@latest
15+
```
16+
17+
Te pedirá elegir:
18+
19+
- Carpeta de destino, en mi caso ya estoy en una carpeta vacía, y elijo ".", si no ponle un nombre de carpeta.
20+
21+
- Eligimos una plantilla: en nuestro caso "Minimal / empty" para tener así un punto de partida simple.
22+
23+
- Le decimos que queremos instalar las dependencias de nuestro proyecto, así nos ahorramos hacer un `npm install` :).
24+
25+
- Ahora toca elegir si queremos que nos cree un repo de Git local, en nuestro caso decimos que si.
26+
27+
Ejecutamos el proyecto:
28+
29+
```bash
30+
npm run dev
31+
```
32+
33+
Si todo va bien debería de mostrarse una instancia del navegador en la dirección `localhost:4321` y una página que dice "Astro"
34+
35+
## Analizando la estructura del proyecto
36+
37+
Analicemos la estructura del proyecto:
38+
39+
```
40+
blank-project/
41+
├── public/ # Recursos estáticos (copiados directamente en la carpeta final dist)
42+
├── src/
43+
│ └── pages/ # Páginas de la aplicación (rutas)
44+
│ └── index.astro # Página principal
45+
├── astro.config.mjs # Configuración de Astro
46+
├── package.json
47+
├── tsconfig.json
48+
└── README.md
49+
```
50+
51+
## Compilar el proyecto
52+
53+
Vamos a hacer un build del proyecto:
54+
55+
```bash
56+
npm run build
57+
```
58+
59+
Obtendremos los archivos finales en la carpeta `dist`, con un HTML por cada página (ojo que esto no es una SPA :)).
60+
61+
## Prettier
62+
63+
Antes de continuar, vamos a dejar Prettier bien configurado, esta herramienta permite formatear el código de manera automática.
64+
65+
Asegúrate que ya tienes el plugin de Prettier instalado
66+
67+
**TODO Pantallazo Prettier**
68+
69+
Y vamos a instalarlo, como dependencia de nuestro proyecto, primero prettier:
70+
71+
```bash
72+
npm install --save-dev prettier
73+
```
74+
75+
Y después el plugin de prettier que formatea ficheros de _astro_
76+
77+
```bash
78+
npm install prettier-plugin-astro --save-dev
79+
```
80+
81+
Y Creamos un archivo `.prettierrc` en la raíz del proyecto, para indicarle a prettier que tiene que usar para los fichero con extensión `.astro` contenido:
82+
83+
```json
84+
{
85+
"plugins": ["prettier-plugin-astro"],
86+
"overrides": [
87+
{
88+
"files": "*.astro",
89+
"options": {
90+
"parser": "astro"
91+
}
92+
}
93+
]
94+
}
95+
```
96+
97+
**Un tema Importante:** Debes abrir la carpeta del proyecto Astro en una nueva ventana de VSCode para que el complemento de Prettier funcione correctamente.
98+
99+
Ahora podemos abrir un fichero .astro, desmontarlo un poco y verás que al grabar se aplica el auto formato.

04-frameworks/15-astro/01-creando-proyecto/miblog/astro.config.mjs renamed to 04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/astro.config.mjs

File renamed without changes.

‎04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/content/astro-plugin.jpg‎

26.8 KB
Loading

‎04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "astro dev",
7+
"build": "astro build",
8+
"preview": "astro preview",
9+
"astro": "astro"
10+
},
11+
"dependencies": {
12+
"astro": "^5.15.3"
13+
},
14+
"devDependencies": {
15+
"prettier": "^3.6.2",
16+
"prettier-plugin-astro": "^0.14.1"
17+
}
18+
}

04-frameworks/15-astro/01-creando-proyecto/miblog/public/favicon.svg renamed to 04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/public/favicon.svg

File renamed without changes.

‎04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/src/pages/index.astro‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
3+
---
4+
5+
<html lang="en">
6+
<head>
7+
<meta charset="utf-8" />
8+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9+
<meta name="viewport" content="width=device-width" />
10+
<meta name="generator" content={Astro.generator} />
11+
<title>Astro</title>
12+
</head>
13+
<body>
14+
<h1>Astro</h1>
15+
</body>
16+
</html>

04-frameworks/15-astro/01-creando-proyecto/miblog/tsconfig.json renamed to 04-frameworks/15-astro/00-fundamentos/00-creando-proyecto/tsconfig.json

File renamed without changes.

‎04-frameworks/15-astro/00-fundamentos/01-fences/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# build output
2+
dist/
3+
# generated types
4+
.astro/
5+
6+
# dependencies
7+
node_modules/
8+
9+
# logs
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store
22+
23+
# jetbrains setting folder
24+
.idea/

0 commit comments

Comments
 (0)