{"id":13765873,"url":"https://github.com/hepsiburada/VoltranJS","last_synced_at":"2025-05-10T21:32:18.343Z","repository":{"id":40250049,"uuid":"325304153","full_name":"hepsiburada/VoltranJS","owner":"hepsiburada","description":"Voltran is a micro frontend framework which is developed by Hepsiburada Technology Team.","archived":false,"fork":false,"pushed_at":"2025-02-11T16:58:51.000Z","size":299,"stargazers_count":412,"open_issues_count":8,"forks_count":30,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-17T10:06:58.472Z","etag":null,"topics":["babel","hepsiburada","javascript","js","micro-frontend-framework","micro-frontends","microfrontends","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hepsiburada.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-29T14:12:45.000Z","updated_at":"2025-02-11T05:19:49.000Z","dependencies_parsed_at":"2023-11-06T11:40:54.501Z","dependency_job_id":"68a64580-7648-4ce3-80cf-304eed35c9f6","html_url":"https://github.com/hepsiburada/VoltranJS","commit_stats":{"total_commits":91,"total_committers":18,"mean_commits":5.055555555555555,"dds":0.8021978021978022,"last_synced_commit":"b65ad827c15e8e88bc9a05f1c16b5f6cc86bc9ee"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepsiburada%2FVoltranJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepsiburada%2FVoltranJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepsiburada%2FVoltranJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepsiburada%2FVoltranJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hepsiburada","download_url":"https://codeload.github.com/hepsiburada/VoltranJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253485548,"owners_count":21916037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","hepsiburada","javascript","js","micro-frontend-framework","micro-frontends","microfrontends","react"],"created_at":"2024-08-03T16:00:47.648Z","updated_at":"2025-05-10T21:32:18.066Z","avatar_url":"https://github.com/hepsiburada.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"http://www.hepsiburada.com\"\u003e\u003cimg src=\"./src/assets/voltran-logo.png\" alt=\"voltran.js\" width=\"220\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  Micro Frontends Framework\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eVoltran is a micro frontends framework which is developed by Hepsiburada Technology Team. Micro frontends help cross functional teams to make end-to-end and independent developments and deployments.\u003c/h4\u003e\n\n \u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://badge.fury.io/js/voltranjs\"\u003e\u003cimg src=\"https://badge.fury.io/js/voltranjs.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/voltranjs\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dy/voltranjs\"\u003e\u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/voltranjs\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/voltranjs\"\u003e\u003c/a\u003e\n \u003ca href=\"https://twitter.com/hepsiburadatech\"\u003e\u003cimg alt=\"Twitter Follow\" src=\"https://img.shields.io/twitter/follow/hepsiburadatech\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#configs\"\u003eConfigs\u003c/a\u003e •\n  \u003ca href=\"#tech\"\u003eTechnology\u003c/a\u003e •\n  \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n### Key Features\n\nYou can use Voltran if you need a micro frontend framework that provides following features:\n\n- Lightweight and fast API\n- Serves single and multiple components\n- Preview (to visualize components)\n- SEO friendly (if needed)\n- CSS \u0026 SCSS support\n- Supports only React (for now)\n\n## Installation\n\nVoltran requires [Node.js](https://nodejs.org/) v10.15.0+ to run.\n\nInstall the Voltran.\n\n#### Yarn\n\n```sh\n$ yarn add voltranjs\n```\n\n#### Npm\n\n```sh\n$ npm install voltranjs\n```\n\n## Usage\n\nThis is an example component.\n\nFirst of all, you should import `@voltran/core`.\n\nAfter that we can write the component's code.\n\n**HelloWorld.js**\n\n```jsx\nconst voltran = require('@voltran/core');\n\nimport React from 'react';\n\nconst ROUTE_PATHS = {\n  HELLOWORLDPAGE: '/HelloWorld'\n};\n\nconst HelloWorld = ({ initialState }) =\u003e {\n  return \u003c\u003eHello World!\u003c/\u003e;\n};\n\nconst component = voltran.default.withBaseComponent(HelloWorld, ROUTE_PATHS.HELLOWORLDPAGE);\n\nexport default component;\n```\n\nIf you want to fetch data from server side, you should add `getInitialState`.\n\n**./conf/local.config.js**\n\n```js\nconst port = 3578;\n\nmodule.exports = {\n  port: port,\n  baseUrl: `http://localhost:${port}`,\n  mediaUrl: '',\n  services: {\n    voltranapi: {\n      clientUrl: 'http://voltran-api.qa.hepsiburada.com',\n      serverUrl: 'http://voltran-api.qa.hepsiburada.com'\n    }\n  },\n  timeouts: {\n    clientApiManager: 20 * 1000,\n    serverApiManager: 20 * 1000\n  }\n};\n```\n\n**HelloWorld.js**\n\n```jsx\n\nconst voltran = require('@voltran/core');\n\nimport React from 'react';\nimport appConfig from '../appConfig';\n\nconst ROUTE_PATHS = {\n  HELLOWORLDPAGE: '/HelloWorld',\n};\n\nconst HelloWorld = ({initialState}) =\u003e {\n    HelloWorld.services = [appConfig.services.voltranApi];\n\n    HelloWorld.getInitialState = (voltranApiClientManager, context) =\u003e {\n      const config = { headers: context.headers };\n      const params = {...};\n\n      return getName({ params }, voltranApiClientManager, config);\n    };\n\n    return (\n        \u003c\u003e\n            Hello World. My name is {initialState.name}!\n        \u003c/\u003e\n    );\n};\n\nconst component = voltran.default.withBaseComponent(HelloWorld, ROUTE_PATHS.HELLOWORLDPAGE);\n\nexport default component;\n\n```\n\n**Output For Preview**\n\n```\nHello World. My Name is Volkan!\n```\n\n**Output For Api**\n\n```\n{\n    html: ...,\n    scripts: [...],\n    style: [...],\n    activeComponent: {\n        resultPath: \"/HelloWorld\",\n        componentName: \"HelloWorld\",\n        url: \"/HelloWorld\"\n    },\n}\n```\n\n## Configs\n\nVoltran requires following configurations:\n\n| **Config**                                    | **Type**             |\n| --------------------------------------------- | -------------------- |\n| [appConfigFile](#appConfigFile)               | Object               |\n| [dev](#dev)                                   | Boolean              |\n| [distFolder](#distFolder)                     | String               |\n| [publicDistFolder](#publicDistFolder)         | String               |\n| [inputFolder](#inputFolder)                   | String \\* `required` |\n| [monitoring](#monitoring)                     | Object               |\n| [port](#port)                                 | Number - String      |\n| [prefix](#prefix)                             | String \\* `required` |\n| [ssr](#ssr)                                   | String               |\n| [styles](#styles)                             | Array                |\n| [output](#output)                             | Object               |\n| [staticProps](#staticProps)                   | Array                |\n| [routing](#routing)                           | Object               |\n| [webpackConfiguration](#webpackConfiguration) | Object               |\n| [sassResources](#sassResources)               | Array                |\n| [criticalCssDisabled](#criticalCssDisabled)   | Boolean              |\n\n#### appConfigFile\n\nIt should contain environment specific configurations (test, production ...).\n\n```\nappConfigFile: {\n  entry: path.resolve(__dirname, './yourConfigFolder/'),\n  output: {\n    path: path.resolve(__dirname, './yourOutputFolder/'),\n    name: 'yourFileName',\n  }\n}\n```\n\n#### dev\n\nDevelopment mode. Set to `true` if you need to debug.\n\n`Default`: `false`\n\n#### distFolder\n\nThe path to the folder where bundled scripts will be placed after the build.\n\n`Default`: `./dist`\n\n#### publicDistFolder\n\nThe path to the folder where asset files will be placed after the build.\n\n`Default`: `./dist/assets`\n\n#### inputFolder\n\nThe path to the folder that contains script files. It's required.\n\nPasses this config to Babel Loader where it reads all js files under this folder.\n\n'Voltran' converts your files to the appropriate format and optimizes them.\n\n#### monitoring\n\nFor now, only prometheus is supported.\n\n```\nmonitoring: {\n  prometheus: false\n}\n```\n\n\u003e or you can set your custom js file.\n\n```\nmonitoring: {\n    prometheus: path.resolve(__dirname, './src/tools/prometheus.js')\n}\n```\n\n#### port\n\n`Default`: `3578`\n\n\u003e If you want to change the port\n\u003e you may need to change the port in appConfigFiles\n\n#### prefix\n\n`It is required.`\n\nThere may be different components owned by different teams using voltrans on the same page. Voltran needs to use a prefix in order to avoid conflicts issues.\nThis prefix is prepended to initial states and CSS class names.\n\n\u003e We recommend that each team use their own acronyms/prefixes.\n\n#### ssr\n\n`Default`: `true`\nVoltran supports server side rendering.\nApplications that need 'SEO' features needs to set this parameter to `true`.\n\n#### styles\n\nThis field's value should be an array of strings. Array values should be the paths to the global CSS files.\n\n```\nstyles: [\n    path.resolve(__dirname, './some-css-file.scss'),\n    path.resolve(__dirname, './node_modules/carousel/carousel.css')\n]\n```\n\n### output\n\n```\noutput: {\n  client: {\n    path: path.resolve(__dirname, './build/public/project/assets'),\n    publicPath: path.resolve(__dirname, './src/assets'),\n    filename: '[name]-[contenthash].js',\n    chunkFilename: '[name]-[chunkhash].js'\n  },\n  server: {\n    path: path.resolve(__dirname, './build/server'),\n    filename: '[name].js'\n  },\n},\n```\n\n#### staticProps\n\nYou can pass static props to all components at the same time.\n\n```\nstaticProps: [\n  {'key': value}\n]\n```\n\n#### routing\n\nVoltran need two files to set routing.\n\n```\nrouting: {\n  components: path.resolve(__dirname, './src/appRoute/components.js'),\n  dictionary: path.resolve(__dirname, './src/appRoute/dictionary.js')\n}\n```\n\n#### criticalCssDisabled\n\nSet to `false` if don't need to critical styles.\n\n`Default`: `true`\n\n### Example files can be found here:\n\n- [components.js](https://github.com/hepsiburada/VoltranJS-Starter-Kit/blob/master/src/appRoute/components.js)\n- [dictionary.js](https://github.com/hepsiburada/VoltranJS-Starter-Kit/blob/master/src/appRoute/dictionary.js)\n\n#### webpackConfiguration\n\nYou can add your webpack configuration. They will be merged with the voltran configs.\n\nYou can access the starter kit we created from the [link](https://github.com/hepsiburada/VoltranJS-Starter-Kit).\n\n#### sassResources\n\nYou can add sass resources to this field as string array. sass-resource-loader gonna inject those files in every sass files so you won't need to import them.\n\nYou can check [sass-resource-loader](https://github.com/shakacode/sass-resources-loader) for usage.\n\n## New Relic Integration\n\nAdd `newrelicEnabled: true` on your config.\n\nIf you throw an error like `throw new Error({message: \"Service error\", code: 500})` from your fragments, Voltran detects the fields and sends each field to New Relic as a custom attribute. These fields appear with `_a` prefix to place in the first of rows on your new relic.\n\n## Tech\n\nVoltran uses a number of open source projects to work properly:\n\n- [ReactJS] - A JavaScript library for building user interfaces!\n- [Webpack] - Module bundler\n- [babel] - The compiler for next generation JavaScript.\n- [node.js] - evented I/O for the backend\n- [hiddie] - fast node.js network app framework (friendly fork of [middie](https://github.com/fastify/middie))\n- [Yarn] - the streaming build system\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://medium.com/hepsiburadatech\"\u003e\u003cimg src=\"./src/assets/hepsitech.png\" alt=\"hepsitech\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":["Tools"],"sub_categories":["Frameworks"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhepsiburada%2FVoltranJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhepsiburada%2FVoltranJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhepsiburada%2FVoltranJS/lists"}