Saltar al contenido
Consejos

Reacciona con el tipo de letra y el Webpack

Podemos usar Express como marco para el backend con EJS como motor de plantillas. Instalemos el mismo usando:

123$ npm i express$ npm i -D @tipos/express$ npm i ejs

javascript

Reacciona con el tipo de letra y el Webpack
Reacciona con el tipo de letra y el Webpack

En nuestro archivo config.ts, añadiremos el siguiente código para el puerto del servidor:

1exportconstSERVER_PORT=parseInt(process.env.SERVER_PORT||"4200");

javascript

Añadamos nuestro módulo web ahora. Para ello, crearemos un nuevo archivo en ./src/web/web.ts, como se muestra a continuación:

123456789101112131415161718192021222324252627importar expreso desde "expreso";importar http desde "http";importar ruta desde "ruta";// Initializationconst app =express();// Configuración para la plantilla engineapp.set("view engine", "ejs");app.set("views", "public");// Configuración para archivos estáticosapp.use("/assets", express. static(path.join(__dirname, "frontendproj"));// Añadir Controllersapp.get("/*",(req, res)=>{ res.render("index");});// Añadir start methodexportconst start =(port: number):Promise<void>=>{const server = http. createServer(app);returnnnewPromise<void;;((resolve, reject)= server.listen(port, resolve);});};

javascript

Así que, como podemos ver, se necesita un directorio de visualización $0027público$0027 y también necesitamos una carpeta para los archivos estáticos: «frontendproj».

Con el motor de plantillas, ahora añadiremos contenido a index.ejs dentro del directorio público.

Añadamos lo mismo que abajo:

12345678910111213141516<! DOCTYPE html;<htmllang="en"<head;<title;;Reaccionar con Typescript y Webpack con EJS Templating Engine</title;<metahttp-equiv="Content-Type "content="text/html;charset=UTF-8">metaname="viewport "content="width=ancho del dispositivo, escala mínima=1.
html


Añadimos un par de elementos de script para nuestros paquetes de código JS, que se construirán usando Webpack.



Otra cosa importante a tener en cuenta es que, mientras que nuestro código fuente estará localizado dentro de ./src/web/frontendproj, la salida compilada será añadida a ./dist/web/frontendproj.



Añadamos un nuevo archivo ./src/web/index.ts, como se muestra a continuación:



1export*from"./web";
javascript

Finalmente, añadiremos un punto de entrada - ./src/main.ts:
12345678910import{SERVER_PORT}from"./config";import*as web from"./web";asyncfunctionmain(){await web.start(SERVER_PORT);console.log(`Servidor en el puerto : http://localhost:${SERVER_PORT}`);}main().catch(error=§;console.error("Error : "+ error));
javascript

Eso debería completar nuestro código de fondo. Ahora deberíamos ser capaces de compilar nuestro código.

Después de añadir el guión para construir el backend y los paquetes relacionados con el Express/EJs, nuestro paquete.json debería verse igual que el de abajo:


1234567891011121314151617181920212223{"nombre": "mi-muestra-react-ts-webpack", "versión": "1.0.0", "descripción":"", "principal": "index.js", "scripts":{"prueba": "eco "error"": No se especifican pruebas... && exit 1""