forked from sheetjs/docs.sheetjs.com
nuxt-node20
This commit is contained in:
parent
04083d4d1e
commit
f6c04938a5
@ -9,11 +9,10 @@ import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
|
||||
:::note
|
||||
|
||||
This was tested against `next v13.4.4` on 2023 May 26.
|
||||
|
||||
:::
|
||||
NextJS is a server-side framework for building static and dynamic sites. For
|
||||
pure static sites, [Webpack loaders](/docs/demos/static/webpack) can preprocess
|
||||
files and NextJS can build static pages from spreadsheets. For dynamic sites,
|
||||
NextJS lifecycle methods can read files on the server side.
|
||||
|
||||
The [NodeJS module](/docs/getting-started/installation/nodejs) can be imported
|
||||
from pages or loaded in Webpack loaders.
|
||||
@ -50,6 +49,33 @@ module.exports = {
|
||||
|
||||
:::
|
||||
|
||||
:::warning Telemetry
|
||||
|
||||
NextJS collects telemetry by default. The `telemetry` subcommand can disable it:
|
||||
|
||||
```js
|
||||
npx next@13.4.4 telemetry disable
|
||||
```
|
||||
|
||||
The setting can be verified by running
|
||||
|
||||
```js
|
||||
npx next@13.4.4 telemetry status
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
The following deployments were tested:
|
||||
|
||||
| NextJS | Date |
|
||||
|:-------|:-----------|
|
||||
| 13.1.1 | 2023-01-14 |
|
||||
| 13.4.4 | 2023-05-26 |
|
||||
|
||||
:::
|
||||
|
||||
## Loading Data
|
||||
|
||||
At a high level, there are two ways to pull spreadsheet data into NextJS apps:
|
||||
|
@ -10,14 +10,49 @@ import CodeBlock from '@theme/CodeBlock';
|
||||
`@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation
|
||||
and on-demand server rendering powered by spreadsheets.
|
||||
|
||||
The [NodeJS module](/docs/getting-started/installation/nodejs) can be imported
|
||||
from Content v1 "parsers" and Content v2 "transformers".
|
||||
|
||||
:::note
|
||||
|
||||
The following deployments were tested:
|
||||
|
||||
| Nuxt Content | Nuxt | Date |
|
||||
|:-------------|:---------|:-----------|
|
||||
| `1.15.1` | `2.16.3` | 2023-04-06 |
|
||||
| `1.15.1` | `2.16.3` | 2023-06-01 |
|
||||
| `2.3.0` | `3.0.0` | 2023-01-19 |
|
||||
| `2.6.0` | `3.5.2` | 2023-06-01 |
|
||||
|
||||
:::
|
||||
|
||||
:::caution Telemetry
|
||||
|
||||
Nuxt embeds telemetry. According to the developers, it is disabled by default.
|
||||
To explicitly disable telemetry, the official documentation recommends:
|
||||
|
||||
```bash
|
||||
npx nuxt telemetry disable
|
||||
```
|
||||
|
||||
At the time the demo was last tested, this command did not work. Instead, a
|
||||
option should be added in `nuxt.config.ts` or `nuxt.config.js` for Nuxt 3 sites:
|
||||
|
||||
```js
|
||||
// ...
|
||||
// highlight-start
|
||||
export default defineNuxtConfig({
|
||||
// @ts-ignore
|
||||
telemetry: false,
|
||||
// highlight-end
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
A global setting can be added to `.nuxtrc` in the user home directory:
|
||||
|
||||
```ini title=".nuxtrc"
|
||||
telemetry.enabled=false
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
@ -54,7 +89,7 @@ const parseSheet = (file, { path }) => {
|
||||
const wb = readFile(path);
|
||||
const o = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
|
||||
return { data: o };
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
// ...
|
||||
@ -109,15 +144,32 @@ neatly with nested `v-for`:
|
||||
|
||||
### Nuxt Content Demo
|
||||
|
||||
:::caution
|
||||
|
||||
When the demo was last tested, parts of the Nuxt dependency tree did not support
|
||||
NodeJS version 20. The creation step will show warnings like
|
||||
|
||||
```
|
||||
npm WARN EBADENGINE Unsupported engine {
|
||||
npm WARN EBADENGINE package: '@nuxt/types@2.16.3',
|
||||
npm WARN EBADENGINE required: { node: '^14.18.0 || ^16.10.0 || ^17.0.0 || ...
|
||||
npm WARN EBADENGINE current: { node: 'v20.2.0', npm: '9.6.6' }
|
||||
npm WARN EBADENGINE }
|
||||
```
|
||||
|
||||
The recommended solution is to switch to Node 18.
|
||||
|
||||
:::
|
||||
|
||||
1) Create a stock app:
|
||||
|
||||
```bash
|
||||
npx create-nuxt-app@4.0.0 SheetJSNuxt
|
||||
npx create-nuxt-app@4.0.0 sheetjs-nuxt
|
||||
```
|
||||
|
||||
When prompted, enter the following options:
|
||||
|
||||
- `Project name`: press Enter (use default `SheetJSNuxt`)
|
||||
- `Project name`: press Enter (use default `sheetjs-nuxt`)
|
||||
- `Programming language`: press Down Arrow (`TypeScript` selected) then Enter
|
||||
- `Package manager`: select `Npm` and press Enter
|
||||
- `UI framework`: select `None` and press Enter
|
||||
@ -135,7 +187,7 @@ The project will be configured and modules will be installed.
|
||||
2) Install the SheetJS library and start the server:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
cd SheetJSNuxt
|
||||
cd sheetjs-nuxt
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm run dev`}
|
||||
</CodeBlock>
|
||||
@ -167,7 +219,7 @@ const parseSheet = (file, { path }) => {
|
||||
const wb = readFile(path);
|
||||
const o = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
|
||||
return { data: o };
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
- Look for the exported object. There should be a `content` property:
|
||||
@ -283,7 +335,8 @@ the library hard-codes UTF-8 interpretations, the `_id` field currently uses
|
||||
the pattern `content:` followed by the filename (if files are placed in the
|
||||
`content` folder directly). This enables a transformer to re-read the file:
|
||||
|
||||
```ts
|
||||
```ts title="Transformer"
|
||||
// @ts-ignore
|
||||
import { defineTransformer } from "@nuxt/content/transformers/utils";
|
||||
import { read, utils } from "xlsx";
|
||||
import { readFileSync } from "node:fs";
|
||||
@ -293,7 +346,13 @@ export default defineTransformer({
|
||||
name: 'sheetformer',
|
||||
extensions: ['.xlsx'],
|
||||
parse (_id: string, rawContent: string) {
|
||||
const wb = read(readFileSync(resolve("./content/" + _id.slice(8))));
|
||||
// highlight-start
|
||||
/* read the underlying file */
|
||||
const buf = readFileSync(resolve("./content/" + _id.slice(8)));
|
||||
/* parse */
|
||||
const wb = read(buf);
|
||||
// highlight-end
|
||||
/* generate JS objects for each worksheet */
|
||||
const body = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
|
||||
return { _id, body };
|
||||
}
|
||||
@ -302,7 +361,7 @@ export default defineTransformer({
|
||||
|
||||
Pages can pull data using `useAsyncData`:
|
||||
|
||||
```html
|
||||
```html title="Page"
|
||||
<script setup>
|
||||
const key = "pres"; // matches pres.xlsx
|
||||
const {data} = await useAsyncData('x', ()=>queryContent(`/${key}`).findOne());
|
||||
@ -312,7 +371,7 @@ const {data} = await useAsyncData('x', ()=>queryContent(`/${key}`).findOne());
|
||||
|
||||
Pages should use `ContentRenderer` to reference the data:
|
||||
|
||||
```html
|
||||
```html title="Page"
|
||||
<template><ContentRenderer :value="data">
|
||||
<!-- data.body is the array defined in the transformer -->
|
||||
<div v-for="item in data.body" v-bind:key="item.name">
|
||||
@ -332,20 +391,33 @@ Pages should use `ContentRenderer` to reference the data:
|
||||
|
||||
### Nuxt Content 2 Demo
|
||||
|
||||
:::caution
|
||||
|
||||
When the demo was last tested, parts of the Nuxt dependency tree did not support
|
||||
NodeJS version 20. If the `yarn install` step fails with a message like
|
||||
|
||||
```
|
||||
error @nuxt/kit@3.4.1: The engine "node" is incompatible with this module.
|
||||
```
|
||||
|
||||
The recommended solution is to switch to Node 18.
|
||||
|
||||
:::
|
||||
|
||||
1) Create a stock app and install dependencies:
|
||||
|
||||
```bash
|
||||
npx nuxi init -t content sheetjs-nc2
|
||||
npx -y nuxi init -t content sheetjs-nc2
|
||||
cd sheetjs-nc2
|
||||
npx yarn install
|
||||
npx yarn add --dev @types/node
|
||||
npx -y yarn install
|
||||
npx -y yarn add --dev @types/node
|
||||
```
|
||||
|
||||
2) Install the SheetJS library and start the server:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npx yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npx yarn dev`}
|
||||
npx -y yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npx -y yarn dev`}
|
||||
</CodeBlock>
|
||||
|
||||
|
||||
@ -412,6 +484,8 @@ After creating the source files, the module must be added to `nuxt.config.ts`:
|
||||
import SheetJSModule from './sheetmodule'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
// @ts-ignore
|
||||
telemetry: false,
|
||||
modules: [
|
||||
SheetJSModule,
|
||||
'@nuxt/content'
|
||||
@ -423,9 +497,9 @@ export default defineNuxtConfig({
|
||||
Restart the dev server by exiting the process (Control+C) and running:
|
||||
|
||||
```bash
|
||||
npx nuxi clean
|
||||
npx nuxi typecheck
|
||||
npx yarn run dev
|
||||
npx -y nuxi clean
|
||||
npx -y nuxi typecheck
|
||||
npx -y yarn run dev
|
||||
```
|
||||
|
||||
Loading `http://localhost:3000/pres` should show some JSON data:
|
||||
@ -469,8 +543,8 @@ const {data} = await useAsyncData('s5s', () => queryContent('/pres').findOne());
|
||||
Restart the dev server by exiting the process (Control+C) and running:
|
||||
|
||||
```bash
|
||||
npx nuxi clean
|
||||
npx yarn run dev
|
||||
npx -y nuxi clean
|
||||
npx -y yarn run dev
|
||||
```
|
||||
|
||||
The browser should now display an HTML table.
|
||||
@ -483,13 +557,13 @@ The page should automatically refresh with the new content.
|
||||
7) Stop the server (press `CTRL+C` in the terminal window) and run
|
||||
|
||||
```bash
|
||||
npx yarn run generate
|
||||
npx -y yarn run generate
|
||||
```
|
||||
|
||||
This will create a static site in `.output/public`, which can be served with:
|
||||
|
||||
```bash
|
||||
npx http-server .output/public
|
||||
npx -y http-server .output/public
|
||||
```
|
||||
|
||||
Accessing `http://localhost:8080/pres` will show the page contents. Verifying
|
||||
|
@ -33,6 +33,16 @@ flowchart LR
|
||||
aoo --> |index.astro\ntemplate body| html
|
||||
```
|
||||
|
||||
:::warning Telemetry
|
||||
|
||||
Astro enables telemetry by default. The tool has an option to disable telemetry:
|
||||
|
||||
```bash
|
||||
npx astro telemetry disable
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Integration
|
||||
|
||||
:::note
|
||||
|
Loading…
Reference in New Issue
Block a user