No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Servidor de desarrollo local

15/26
Recursos

¿Cómo configurar el punto de entrada de una aplicación?

Para comenzar a trabajar con un proyecto web, es esencial establecer adecuadamente el punto de entrada de nuestra aplicación. En este caso, utilizamos Visual Studio Code para crear un archivo index.html dentro de la carpeta public. Este archivo servirá como el principal punto de ingreso y su estructura debe seguir estándares de HTML5. Si necesitas afianzar conocimientos en HTML5 y CSS, el curso de Plazti es altamente recomendado. Aquí está el snippet básico de lo que deberías incluir:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUXTAgram</title>
</head>
<body>
    <main></main>
</body>
</html>

Este código incluye etiquetas fundamentales como DOCTYPE, html, head, meta para el manejo de caracteres UTF-8 y adaptación a diferentes dispositivos. El body contendrá un main, donde insertaremos la aplicación.

¿Cómo crear la estructura básica de un proyecto Svelte?

Una buena organización del proyecto es clave para un desarrollo eficiente. En este caso, dentro de la carpeta src, se crea un directorio llamado containers para almacenar componentes principales, empezando con App.svelte. Este componente inicial podría tener la siguiente estructura:

<script>
    // Aquí podría ir la lógica del componente
</script>

<style global>
    body {
        background-color: #f5f5f5;
        color: white;
    }
</style>

<div id="main">
    <h1>Hello PUXTAgram</h1>
</div>

Este archivo, aunque inicialmente sencillo, será el lugar donde se desplegará nuestra aplicación. La sintaxis de Svelte permite combinar lógica, estilos y estructura en un solo lugar.

¿Cómo configurar Webpack y Webpack Dev Server?

Es crítico configurar correctamente nuestro entorno de desarrollo para asegurar cambios en tiempo real y preparar el proyecto para producción. Primero, instalamos Webpack Dev Server usando:

npm install webpack-dev-server --save-dev

A continuación, en el archivo package.json, configuramos dos scripts:

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
}
  • Build: Compila el proyecto para producción.
  • Start: Ejecuta un servidor de desarrollo que abre automáticamente el navegador.

Una vez configurado todo lo anterior, podemos compilar el proyecto y ejecutar un servidor de desarrollo para ver el primer render:

npm run build
npm run start

Esto nos mostrará nuestra aplicación inicial en el navegador, validando que la configuración es correcta.

Con estas indicaciones, se sientan las bases para comenzar el desarrollo de una aplicación web robusta y bien estructurada. ¡Ahora estás listo para seguir adelante y ver cómo tu proyecto cobra vida! Recuerda seguir explorando y aprendiendo para mejorar tus habilidades.

Aportes 28

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si te salio el error al hacer start
Si tienes una webpack-cli V4 o superior
webpack-dev-server ahora es webpack serve

  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve"
  },

Para los que le genera un error de .babelrc. Dentro de este archivo debe poner lo siguiente:

{
    "presets": [
        "@babel/preset-env"
    ]
}

Hay que instalar svelte-loader:

npm install svelte-loader --save-dev
npm install webpack-dev-server --save-dev

Siempre es bueno saber como configurar un proyecto de cero, pero existiendo tecnologías como vite que lo hace mucho mas sencillo, creo que estas 2 clases no suman mucho. y se pudieron aprovechar para profundizar mas en el proyecto como tal o en aprender mas sobre svelte.

Al ejecutar el comando: npm run build me salió un error y lo resolví creando el archivo .babelrc en la raíz del proyecto, el cual debe contener lo siguiente:
{
“presets”: [
"@babel/preset-env"
]
}

Al ejecutar el comando: npm run build. En este caso he modificado, en el archivo package.json la clave scripts dejándola de la siguiente manera:
“scripts”: {
“build”: “webpack --mode production”,
“start”: “webpack serve”
},

Estas soluciones las aportaron otras persona por este medio, sin embargo he puesto las que funcionaron para mí, en este aporte por si es el caso de alguien más.

Para los que aun no han tomado los cursos de Webpack:
Curso de WebPack
Curso practico de WebPack

Compañeros me pueden ayudar con el siguiente error:

Les comparto mi código de webpack.config.js donde creo entender que estaría el error:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  outpud: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: ["*", ".mjs", ".js", ".svelte"],
  },
  module: {
    rules: [
      {
        test: /\.js? $/,
        exclude: /node.modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.svelte$/,
        exclude: /node.modules/,
        use: {
          loader: "svelte-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
};

Desde la clase pasada agregue el archivo .babelrc y esto tengo instalado:

"devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

Ayuda!!!

Cambiar en package.json por las siguientes versiones de webpack para evitar el siguiente Error: no se puede encontrar el módulo ‘webpack-cli / bin / config-yargs’

"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.5.1"

A veces estoy tan acostumbrado a user npm install y que todo se configure en automático, pero es genial aprender como funciona todo por detrás

npm install --save-dev webpack-dev-server

Este warning

WARNING: You should add "svelte" to the "resolve.conditionNames" array in your webpack config. See https://github.com/sveltejs/svelte-loader#resolveconditionnames for more information

se refiere a esta línea, para agregar en la configuración de webpack

    resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte'],
        conditionNames: ['svelte']
    },

Recuerden añadir la carpeta de distribución “dist” a la lista de elementos ignorados por git en .gitignore

# compiled output
/dist

Si les sale algún error del tipo:

[webpack-cli] ReferenceError: globalThis is not defined

Significa que tienen una versión vieja de nodejs, ya que eso se implementó en la versión 12 de nodejs.
Se arregla actualizando nodejs a la última versión

Me sucedió algo extraño jaja, al abrir el proyecto con npm run start me apareció con el icono de Vue! xdd

Si alguien tiene problemas con la version que instalan de webpack usen:

    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"

Alguien sabe por que me sale este error?, me sale en todos lados no solo en este curso ya estoy odiando a webpack xd

Si quieren escribir una estructura básica de html escriban el simbolo de admiración “!” y den click en lo primero que sale.

¿Me pueden ayudar con este error?

Genial! Estoy muy ansioso 😃

Tengo este ERROR! Ya repeti los pasos 3 veces desde el inicio y nada! Alguien me podría ayudar?

Un gusto leer los comentarios, a cada uno nos faltó algo o le pifiamos en sintaxis jajaja.
En mi caso, en el webpack.config puse plugin en vez de plugins 😄

boby :v

👌

Si actualmente tienes problemas con webpack-cli te recomiendo borrar la versión actual con npm uninstall webpack-cli y luego instalar una estable (ejemplo, 3.3.11) con npm install [email protected].
¡Suerte!

Por si alguien tiene problemas para compilar, pruebe el comando

    "start": "webpack serve --open chrome"

y si tienen un problema con htmlWebpackPlugin, aquí hay info al respecto https://github.com/jantimon/html-webpack-plugin/issues/1451

npm install webpack-dev-server --save-dev
<npm install webpack-dev-server --save-dev>