# \[Automation\] Publishing Velo code to Web. Case Study - Code Snippets

**URL:** <https://forum.wixstudio.com/t/automation-publishing-velo-code-to-web-case-study-code-snippets/63437>\
**Category:** Show and tell\
**Tags:** code, cms, wix-studio, wix-stores\
**Created:** [October 11, 2024, 9:19am UTC](https://forum.wixstudio.com/t/automation-publishing-velo-code-to-web-case-study-code-snippets/63437 "2024-10-11T09:19:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![varun-dev](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/varun-dev/32/84974_2.png) [@varun-dev](https://forum.wixstudio.com/u/varun-dev)\
**Post date:** [October 11, 2024, 9:19am UTC](https://forum.wixstudio.com/t/automation-publishing-velo-code-to-web-case-study-code-snippets/63437/1 "2024-10-11T09:19:46Z")

</div>

### Summary

In this article, we talk about how we have automated publishing real working tested source code to a web page for users to copy as snippets and use it in their projects. This is part of our new [Free Snippets Website](https://snipps.liquis.io/) built on Wix Studio.

 ![code (1)](https://us1.discourse-cdn.com/wix/original/3X/2/7/27a7f21d53fed0250bc9c32a6d21bbfcfc38b8b5.png)

### List of modules that we have used to achieve this automation

| Package | How we have used it |
| --- | --- |
| `fs` | read contents of code files |
| `terser` | minify code |
| `comment-parser` | parse comments to create documentation |
| `wix-data` | save content to CMS |
| `wix-dataset` | use dynamic item page for each snippet |

The code snippets in this article are simplified to explain the concepts.

### Step 1: Reading content of code snippet files

The first step involves gathering all the snippet files stored in a code directory using `fs.readdir` and reading contents of each file using `fs.readFile` for processing.

```javascript
import fs from 'fs/promises'

async function processSnippets(directoryPath) {
    // read all files in the directory
    const files = await fs.readdir(directoryPath)

    for (const file of files) {
        // read contents of each source file 
        const fileContent = await fs.readFile(filePath, 'utf8')
        await handleFileContent(fileContent)
    }
}

```

### Step 2: Generating Documentation

We are generating a part of the documentation for configurations of snippets from the code using `comment-parser` npm package. It reads through the comments in the original code, parses them, and extracts relevant information like parameters and descriptions.

```javascript
import { parse } from 'comment-parser'

function parseDocumentation(code) {
    const parsedComments = parse(originalCode)
    const documentation = parsedComments.map(comment => {
    // loop through comment.tags and format the data    
    })
    return documentation
}

```

### Step 3: Minifying the Code

We use the `terser` package to minify a part of the [snippet](https://snipps.liquis.io/-/dataset-search). .

```javascript
import { minify } from 'terser'

function getMinifiedCode(fileContent) { 
    const minified = minify(fileContent)
    const minifiedCode = minified.code
    return minifiedCode
}

```

### Step 4: Saving the Snippets into Wix CMS

The final step in the pipeline is saving the minified code and the generated documentation into my site’s CMS. For this, I use the `wix-data` API and its `bulkSave` method, which allows me to store multiple records at once. This ensures that both the snippets and their corresponding documentation are stored efficiently.

```javascript
import fs from 'fs/promises'
import wixData from 'wix-data'
import { minify } from 'terser'
import { parse } from 'comment-parser'

async function processSnippets(directoryPath) {
    // read all files in the directory
    const files = await fs.readdir(directoryPath)
    const processedSnippets = []
    for (const file of files) {
        // read contents of each source file 
        const fileContent = await fs.readFile(filePath, 'utf8')
        const doc = parseDocumentation(fileContent)
        const code = getMinifiedCode(fileContent)
        processedSnippets.push({doc, code})
    }
    await wixData.bulkSave('SnippetsCollection', processedSnippets)
}

```

### Final step

There are dynamic page that create a Snippet documentation page for each snippets in added to CMS. We are also using rich text fields for some documentation as you will notice on [snippet item page](https://snipps.liquis.io/-/dataset-search).

### Conclusion

This automated process allows us to

- Efficiently manage and publish code snippets to our site.
- Saves a lot of time from doing it all manually.
- Ensures that the snippets delivered to users are real, tested and ready to use.

#### Don’t forget to pay a visit to our Free Snippets Library 🙂

[https://snipps.liquis.io](https://snipps.liquis.io)