Pasos para utilizar libreria de Pagegrowler en un proyecto nextJs
- Dentro de carpeta 'pages' crear si no existe y modificar el archivo _'app.js' con el siguiente contenido;
import {AppWrapper} from 'pagegrowler-nextjs-lib';
function Application({ Component, pageProps }) {
/* Se importan los widgets desde la aplicacion padre hacia la libreria */
pageProps.widgets = widgets;
pageProps.templates = templates;
return (
<AppWrapper>
<Component {...pageProps} />
</AppWrapper>
)
}
export default Application- Crear en caso que no exista un archivo al mismo nivel que _'app.js' llamado '[...match].js' con lo siguiente:
import {useAppContext, PagegrowlerInstance} from 'pagegrowler-nextjs-lib';
export async function getServerSideProps(context) {
let pagegrowler = PagegrowlerInstance();
return pagegrowler.handleGetServerSideProps(context, false)
}
const Match = ({config}) => {
let Pagegrowler = useAppContext().pagegrowler;
return Pagegrowler.handleMatch(config);
}
export default Match;- Dentro de la carpeta 'Pages' crear una nueva carpeta llamada 'pagegrowleriframe' y dentro de esta misma crear un nuevo archivo llamado '[...match].js', este archivo se completa con:
import { useAppContext, PagegrowlerInstance } from 'pagegrowler-nextjs-lib';
export async function getServerSideProps(context) {
let Pagegrowler = PagegrowlerInstance();
const { match } = context.params;
let result = {
template: match
};
return {
props: {
config: result
}
}
}
const Match = ({config}) => {
let Pagegrowler = useAppContext().pagegrowler;
console.log('Match Front', config)
return Pagegrowler.handleIframeMatch(config);
}
export default Match;- En la raiz del proyecto generar un nuevo archivo llamado 'jsconfig.json' que sera el encargado de wrappear las importaciones de Widgets y templates. Deberá tener:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/widgets/*" : ["components/Widgets/*"],
"@/templates/*":["components/Templates/*"],
"@/meta/*":["components/Meta/*"],
"@/lib/*": ["lib/*"]
}
}
}La ruta de los widgets y template puede ser modificada, en ese caso deberan modificar la ruta que hace referencia dentro del path de cada una de las carpetas
Recomendamos la siguiente estructura:
...
components
|___Widgets
| |___Widget_Name
| |___ ...
|___Templates
|___Template_Name
|___ ...
...- Siguiendo la estructura del punto anterior, debes crear en la carpeta raÃz una carpeta padre llamada 'components' y dentro de esta las 3 siguientes carpetas:
- 'Templates'
- 'Widgets'
- 'Meta'
- Para hacer visibles los templates y los widgets el siguiente paso es crear dentro de la carpeta 'components/Templates' y 'components/Widgets' un archivo llamado 'index.js', será el en cargado de hacer visible a los mismos y debera tener la siguiente estructura:
import dynamic from 'next/dynamic';
export default {
{Nombre_Widget}: dynamic(() => import('./{NombreCarpetaWidget}')),
};ej:
import dynamic from 'next/dynamic';
export default {
Header: dynamic(() => import('./Header')),
};Pero para esto debemos generar un Widget y un Template:
Los pasos son: Dentro de la carpeta 'components/Widgets' vamos a agregar una nueva subcarpeta con el nombre del Widget, (ej: Header) y dentro de esta un nuevo archivo llamado 'index.js', Un ejemplo simple seria este:
export default function Header(props) {
return (
<>
<h1>Hola Pagegrowler<h1>
</>
)
}La estructura final queda de la siguiente manera:
...
components
|___Widgets
| |___ Header
|___index.js
|___Templates
|___Template_Name
|___ ...
...- Editar el archivo 'package.json' y agregar dentro del objeto 'dependencies' una nueva propiedad con estos valores:
"pagegrowler-nextjs": "{{ingresar version}}"
ej:
{
"name": "project name",
"version": "1.1.1",
"private": true,
"dependencies": {
...
"axios": "^0.21.1",
"pagegrowler-nextjs": "{{ingresar version}}"
...
},
"devDependencies": {
"nodemon": "^2.0.7",
...
},Estructura final del proyecto quedaria algo como esto:
...
components
|___Widgets
| |___Header
| | |___index.js
| |___index.js
|___Templates
| |___Template_Name
| | |___index.js
| |___index.js
|___Meta
pages
|___pagegrowleriframe
| |___[...match].js
|___ _app.js
|___[...match].js
jsconfig.json
package.json
...
