Deploy

1 - Development of your project

To deploy your project, first create new Nodality application by running the following command:

npm create nodality@latest my-app

Navigate to your app:

cd my-app

You will see src/app.js generated by the tool. Generate necessary elements by modifying elements and nodes arrays. In this example, we will use the h1 element and the blast operation.

src/app.js

import * as Nodality from "nodality";

const elements = [
  { type: "h1", text: "Hello" }
];

const nodes = [
  { op: "blast" }
];

new Des()
  .nodes(nodes)
  .add(elements)
  .set({
    mount: "#mount",
    code: true,
  });

You can also create a reusable component if you want. You can make it manually or using CLI. src/component.js

import * as Nodality from "nodality";

class Nice extends Base {
    constructor(props) {
        super();
        this.props = props;
    }

    render(){
        return new Text(this.props.year)
        .set({
            color: "#1abc9c"
        });
    }
}

export { Nice };

Here is the structure for the website:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>App</title>

   <script type="importmap">
         {
           "imports": {
             "nodality": "/dist/lib.bundle.js"
           }
         }
      </script>

      <style>
         * {
         margin: 0;
         padding:0;
         box-sizing: border-box;
         }
      </style>

</head>
<body>
  <div id="mount"></div>

<!----ADD YOUR COMPONENT GENERATOR-->
  <script type="module" src="/src/app.js"></script>

<!----ADD YOUR COMPONENT (optional)-->
    <script type="module">
      import {Nice} from "/src/component.js";
      
      new Nice({
          year: "2025"
        })
        .mount("#mount");
    </script>
</body>
</html>

To recompile the app after changes, run:

npm run build && npm start

2 - Publish website

Create new publish.html file, then add the script tag with dist/lib.bundle.js to your index.html. Finally your generated code:

publish.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>App</title>

   <script type="importmap">
         {
           "imports": {
             "nodality": "/dist/lib.bundle.js"
           }
         }
      </script>

      <style>
         * {
         margin: 0;
         padding:0;
         box-sizing: border-box;
         }
      </style>
</head>
<body>
  <script type="module" src="dist/lib.bundle.js">
  </script>
  <div id="mount"></div>

  <script type="module">
    new Text("Hello").set({
    size: "S1",
    font: "Arial",
    stroke: {
        op: {
            name: "blast",
            color: "green",
            width: "1px"
        }
    }
}).render("#mount"); 
 
  </script>


    <script type="module">
      import {Nice} from "/src/component-publish.js";
      
      new Nice({
          year: "2025"
        })
        .mount("#mount");
    </script>
</body>
</html>

Also create src/component-publish.js. Remove import * line from the top of the file if it's there.

//import * as Nodality from "nodality";

class Nice extends Base {
    constructor(props) {
        super();
        this.props = props;
    }

    render(){
        return new Text(this.props.year)
        .set({
            color: "#1abc9c"
        });
    }
}

export { Nice };

To recompile the app after changes, run:

npm run build && npm start

Upload to server

To share your project with the world, upload dist folder and index.html file to your hosting provider.

1 - Development of your project​

2 - Publish website

Upload to server

1 - Development of your project