Scripts
Node.js version 16.17.0 + / 18.1.0 + installed.
NPM
Use the following commands to start, build, and test packages:
npm run start:[package] // start package
npm run start:all // start all packages
npm run build:[package] // build package
npm run build:all // build all packages
npm run test:[package] // test package
npm run test:all // test all packages
NX Commands
Run, build, and test packages using NX commands:
npx nx run [package] // start package
npx nx build [package] // build package
npx nx run-many -t [script] // start/build/test multiple packages
npx nx graph // show project dependencies
Publishing
Manage version updates and publishing:
npx nx release version --projects=[name1,name2] --dry-run // version update dry run for testing
npx nx release version --projects=[name1,name2] // version update
npx nx release publish --projects=[name1,name2] --dry-run // publish dry run for testing
npx nx release publish --projects=[name1,name2] // publish
Vite
Node.js version 16.17.0 + / 18.1.0 + installed.
Please update if your package manager asks for it. If you are expecting issues with
vite.config.js and you don't want to update the npm, try using the 4.3.9 version of
vite.
Vite (French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. Data Den can be imported in Vite applications according to the following procedure:
Step 1
Create a new vite project and enter the newly created directory. Pick
Vanilla framework and JavaScript variant. You can skip this step if you already have it
installed.
npm create vite@latest my-project
cd my-project
npm install
Step 2
Download the Data Den package from Your Orders and unpack it in the created project
Step 3
Import the Data Den JS file in main.js and add the basic config for Data Den. You can use the example
below.
import './style.css'
import { DataDen } from './data-den/js/data-den.es.min.js'
document.querySelector('#app').innerHTML = `
<div style="margin-top: 100px; display: flex; justify-content: center;">
<div id="dd"></div>
</div>
`
const rows = [
{ car: 'Honda', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', year: '09/02/2020', price: 31000 }
];
(() => {
const options = {
columns: [
{
field: 'car',
headerName: 'Car',
},
{
field: 'year',
headerName: 'Year',
},
{
field: 'price',
headerName: 'Price',
},
],
rows: rows,
};
const dd = document.getElementById('dd');
const dataDenBasicSorting = new DataDen(dd, options);
})();
Step 4
Remove the default content of the style.css file and import Data Den stylesheets.
@import 'data-den/css/data-den.min.css';
Step 5
Data Den should be connected properly to the vite app. Type the code bellow to run dev server and see the result.
npm run dev