Yo lo resolvi instalando un paquete:
yarn add win-node-env
Fundamentos de SSR
¿Por qué necesito aprender sobre SSR?
El problema de las Single Page Applications
Poniendo a prueba las Single Page Applications
¿Qué es el Server Side Render?
Ventajas y desventajas del Server Side Render
Crea tu primer app con SSR
Tu nuevo proyecto: Helix Eye
Configurando Webpack para compilar TypeScript
Tu primer servidor con Express.js y TypeScript
Creando un template con HTML
Renderizando React desde el servidor
Hidratando la aplicación y separando el bundle del cliente
Initial Props y Consultas a la API desde el servidor
Consumiendo las Initial Props desde el cliente
Manejo de estilos desde el servidor
Bonus
Hot Module Replacement
Platzi Engine vs. Next.js
¿Quieres un Curso Avanzado de Server Side Render?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Tu nuevo proyecto: Helix Eye
6/17Recursos
Aportes 11
Preguntas 2
Ordenar por:
Si alguien llega a tener un problema relacionado con NODE_ENV, al ejecutar algunos de los comandos, simplemente puedes mover esa misma variable de entorno a un archivo .env y eliminarla de los scripts.
Yo hice la instalacion con NPM y te cuento como por si alguien batalla como yo lo hice ja:
1.- En la terminal: "npm install"
2.- Cambie mi packge.json y quedo asi:
"scripts": {
"dev": "npm start",
"build": "NODE_ENV=production webpack",
"start": "PORT=$PORT NODE_ENV=production npm run build && node server.js"
},
3.- Cambié el nombre del archivo “.env.example” a solo “.env” y lo modifiqué quedando "PORT=3000"
4.- Por ultimo: “npm run start” y pude abrir la pagina
Instalar las dependencias y posteriormente ejecutar los comandos me dieron muchos problemas, par ello tuve que hacer lo siguiente:
Limpiar el caché con
yarn clean cache
Agregar “cross-env” a cada script quedando de la siguiente manera:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack serve",
"build": "cross-env NODE_ENV=production webpack",
"start": "cross-env NODE_ENV=production yarn run build && node server.js"
},
Y luego instalar esa dependencia (cross-env) usnado npm con el siguiente comando
npm install --save-dev cross-env
Pd.: Yo uso windows
si estas trabajando en windows y npm y tienes problemas al momento de ejecutar tu priyecto ... sigue estos pasos :
1. en la terminal ejecuta npm install --save-dev cross-env
2. en tu archivo package.json pon esto en los scripts : "scripts": {
"dev": "cross-env NODE\_ENV=development webpack serve"
}
3. ahora si , ejecuta en la terminal npm run dev y esto deberia correr tu proyecto
al 17/4/2024 para q este proyecto arranque con windows y npm realicé lo sgt -->
npm install --save-dev cross-env
y despues cambié los script por este -->
“scripts”: {
“dev”: “cross-env NODE_ENV=development webpack serve”,
“build”: “cross-env NODE_ENV=production webpack”,
“start”: “cross-env NODE_ENV=production yarn run build && node server.js”
},
GitHub - platzi/helix-eye-custom-SSR
Si a alguien le sale el siguiente error al inicio de cada archivo Tsx:
```js
'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead
```
Lo que a mi me funcionó fue instalar @typescript-eslint/eslint-plugin y @typescript-eslint/parser con una versión mayor a la 6. Instalan, reinician el servidor y el problema debería solucionarse.
Si a alguien le sale el siguiente error al inicio de cada archivo Tsx:
```js
DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead
```Lo que a mi me funcionó fue instalar @typescript-eslint/eslint-plugin y @typescript-eslint/parser con una versión mayor a la 6. Instalan, reinician el servidor y el error debería solucionarse.
Si alguien desea ver los archivos styles.ts con diferenciador de colores esta extension es genial vscode-styled-components
si estan trabajando en Windows deben colocar SET antes de la configuracion de NODE_ENV en los escripts
SET NODE_ENV=develompoent
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?