{"id":13767311,"url":"https://github.com/constgen/neutrino-preset-react-nodegui","last_synced_at":"2025-10-29T16:30:54.912Z","repository":{"id":57310448,"uuid":"236846037","full_name":"constgen/neutrino-preset-react-nodegui","owner":"constgen","description":"Neutrino preset for React NodeGui apps development","archived":false,"fork":false,"pushed_at":"2020-09-17T11:03:08.000Z","size":148,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T22:43:02.091Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/constgen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-28T21:29:32.000Z","updated_at":"2020-09-17T11:03:10.000Z","dependencies_parsed_at":"2022-09-04T12:02:07.769Z","dependency_job_id":null,"html_url":"https://github.com/constgen/neutrino-preset-react-nodegui","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constgen%2Fneutrino-preset-react-nodegui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constgen%2Fneutrino-preset-react-nodegui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constgen%2Fneutrino-preset-react-nodegui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constgen%2Fneutrino-preset-react-nodegui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/constgen","download_url":"https://codeload.github.com/constgen/neutrino-preset-react-nodegui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857515,"owners_count":16556062,"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":[],"created_at":"2024-08-03T16:01:07.308Z","updated_at":"2025-10-29T16:30:49.575Z","avatar_url":"https://github.com/constgen.png","language":"JavaScript","funding_links":[],"categories":["Boilerplates"],"sub_categories":["Samples and Experiments"],"readme":"# neutrino-preset-react-nodegui\n\n`neutrino-preset-react-nodegui` is a [Neutrino](https://neutrino.js.org) preset for [React NodeGUI](https://react.nodegui.org/) applications development.\n\n[![NPM version][npm-image]][npm-url]\n[![NPM downloads][npm-downloads]][npm-url]\n[![Build Status][build-status]][travis-url]\n\n## What is Neutrino?\n\n[Neutrino](https://neutrino.js.org) is a configuration engine that allows to bundle Webpack configurations or their parts as modules and publish them to NPM. Such modules usually are called presets or middlewares. They are designed to work in conjunction with Neutrino core in your project. You can compose compilation, linting, testing and other configurations, and share them to developers.\n\n## What features does this preset provide?\n\nThis preset does all dirty job for setting up Webpack for you. It implements a setup of projects based on [NodeGUI and React](https://github.com/nodegui/react-nodegui).\n\n### Features\n\n- Zero upfront configuration necessary to start developing and building a React NodeGUI app\n- Modern Babel compilation supporting ES modules, async functions, dynamic imports, ES class properties, rest spread operators, decorators and automatic polyfills bound to the platform\n- Sourcemaps\n- Tree-shaking to create smaller bundles\n- Hot Module Replacement enabled with source-watching during development\n- Disabled redundant `[HMR]` console messages\n- Auto-open the application in the development mode\n- Debug console cleared on every file change. Your outdated logs will be removed\n- Webpack loaders for importing JSX components, TypeScript, CSS, images, icons and SVGs\n- User-friendly building progress bar\n- Detect and warn about circular dependencies during build time\n- Git revision information through environment variables (VERSION, COMMITHASH, BRANCH)\n- Consider external dependencies sourcemaps for better debugging during development\n- Production-optimized bundles with minification\n- Resolve URLs in JSX like in HTML for these elements: `img[src]`, `link[href]`, `Image[src]`, `video[src]`, `Video[src]`, `audio[src]`, `Audio[src]`\n\n## Requirements\n\n- Node.js v12+\n- Neutrino v9\n- React NodeGUI v0.4.0+\n- React v16-17\n- Webpack v4\n- CMake v3.1+ (https://cmake.org/install/)\n- 64 bit OS\n- Windows 7+, macOS 10.10+, Ubuntu 16.04+ and Debian 10+\n- **Make and GCC v7** on Unix or **Visual Studio Build Tools 2017** on Windows\n\n## Prerequisites\n\nBefore the installation you need to correctly setup your environment.\n\n1. Upgrade to NodeJS v12 or higher. The newest Node installer on Windows proposes to *automatically install all necessary tools* for native modules compilation. To avoid manual setup, it is highly recommended to **opt-in** to this option:\n\n\u003cimg src=\"docs/node-installer.png\" height=\"auto\" width=\"350\" alt=\"Node Installer Wizard\" /\u003e\n\n2. Install CMake 3.1 or higher to your system if not already. Instructions can be found here: https://cmake.org/install/\n\n3. If you are on Mac or Linux make sure `make` and `gcc` are installed\n\n4. On Ubuntu and Ubuntu-based distros it is advisable to run `sudo apt-get update`, followed by `sudo apt-get install pkg-config build-essential`\n\n5. On Windows no extra steps are required if you did everything as suggested in the point **1**. But if you decided to setup build tools manually you have several options describe in [this documentation](https://github.com/nodejs/node-gyp#on-windows) :\n   - Install Visual Studio 2017\n   - Install Visual Studio Build Tools\n\nIf everything is correct [NodeGUI](https://nodegui.org/) will be compiled on initial `npm install` (on 'postinstall' phase). You can find more details about environment setup in the [official documentation](https://react.nodegui.org/docs/guides/getting-started)\n\n## Installation\n\n`neutrino-preset-react-nodegui` can be installed with NPM. Inside your project, make sure `neutrino`, `webpack` and `neutrino-preset-react-nodegui` are development dependencies.\n\n```bash\nnpm install --save @nodegui/nodegui @nodegui/react-nodegui react\nnpm install --save-dev neutrino neutrino-preset-react-nodegui webpack webpack-cli\n```\n\nNow edit your project's `package.json` to add commands for starting and building the application:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"webpack --mode production\",\n    \"start\": \"webpack --mode development\",\n    \"open\": \"qode --inspect ./build/index.js\"\n  }\n}\n```\n\nThen add the new file `.neutrinorc.js` in the root of the project:\n\n```js\nlet reactNodegui = require('neutrino-preset-react-nodegui')\n\nmodule.exports = {\n   use: [\n      reactNodegui()\n   ]\n}\n```\n\nAnd create a `webpack.config.js` file in the root of the project, that uses the Neutrino API to access the generated webpack config:\n\n```js\nlet neutrino = require('neutrino')\n\nmodule.exports = neutrino().webpack()\n```\n\n## Project Layout\n\n`neutrino-preset-react-nodegui` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This means that by default all project source code should live in a directory named `src` in the root of the project. This includes JavaScript files, stylesheets, images, and any other assets that would be available to your compiled project. Only files explicitly imported or lazy loaded to your project will be bundled. You may use JavaScript or TypeScript for development. The entry file may be any of both: `src/index.jsx` or `src/index.tsx`\n\n## Quickstart\n\nAfter installing Neutrino and this preset, add a new directory named `src` in the root of the project, with a single JSX file named `index.jsx` in it. The preset cares about mounting to the native environment and hot reload configuration. You only have to export your main component that refers to your application. Edit `src/index.jsx` file with the following:\n\n```jsx\nimport { Text, Window, View } from '@nodegui/react-nodegui'\nimport React from 'react'\n\n// import { QIcon } from '@nodegui/nodegui'\n// import logoIcon from './logo.png'\n\nconst styleSheet = `\n  #header {\n    font-size: 34px;\n    padding-top: 20px;\n    qproperty-alignment: \"AlignHCenter\";\n  }\n`\n\nexport default class App extends React.Component {\n   render () {\n      return (\n         \u003cWindow\n            windowTitle=\"Hello world\"\n            minSize={{ width: 500, height: 300 }}\n            styleSheet={styleSheet}\n\n            // windowIcon={new QIcon(logoIcon)}\n         \u003e\n            \u003cView\u003e\n               \u003cText id=\"header\"\u003eI am a C++ programmer\u003c/Text\u003e\n            \u003c/View\u003e\n         \u003c/Window\u003e\n      )\n   }\n}\n```\n\nYou can change this code base to better match your needs. Import other parts of your application and render them inside. More projects examples can be found [here](https://github.com/nodegui/examples/tree/master/react-nodegui)\n\nStart the app in a development mode:\n\n```bash\nnpm start\n```\n\nThe console shows that application compilation is finished and can be inspected. Also the application itself will open in a new window.\n\n## Building\n\nThe project builds static assets to the `build` directory by default when running `npm run build`:\n\n```bash\n❯ webpack --mode production\n\n√ React-nodegui-starter 1.0.0 (NodeGui)\n  Compiled successfully in 15.77s\n\nVersion: webpack 4.41.5\nTime: 15700ms\nBuilt at: 2020-01-29 23:46:56\n                                             Asset      Size  Chunks             Chunk Names\n       images/1d535df5e2e3bb126160e27b9235024f.jpg  58.1 KiB          [emitted]\nnodegui_core-fdbc23f7957be55a3ba3fc4d551e99ac.node  1.13 MiB          [emitted]\n                                          index.js   365 KiB       0  [emitted]  index\n```\n\nYou can start a production version of built application with `npm run open`:\n\n```bash\n❯ qode --inspect ./build/index.js\n\nDebugger listening on ws://127.0.0.1:9229/bed4554e-8aa3-4547-8d7c-563e4be534a5\nFor help, see: https://nodejs.org/en/docs/inspector\n```\n\nThe production code can be inspected with remote debugger. But the sourcemaps will not work until you enable them for production in [options](#Preset-options)\n\n## Hot Module Replacement\n\nAs `neutrino-preset-react-nodegui` completely controls the launching of your application instance. It automatically enables Hot Module Replacement for all files during development. No extra configuration or changes in your source code are necessary. You don't need to restart the application every time files are changed.\n\nUsing dynamic imports with `import()` will automatically create split points and hot replace those modules upon modification during development.\n\n## Styles\n\nAs QT uses its [own proprietary stylesheet syntax](https://doc.qt.io/qt-5/stylesheet-syntax.html) this preset supports loading CSS as a string. You can use it like this\n\n```jsx\nimport { View, Text } from '@nodegui/react-nodegui'\n\nimport styles from './styles.css'\n\nlet element = (\n   \u003cView styleSheet={styles}\u003e\n      \u003cText id=\"header\"\u003eI am a C++ programmer\u003c/Text\u003e\n   \u003c/View\u003e\n)\n```\n\n## Preset options\n\nYou can provide custom options and have them merged with this preset's default options to easily affect how this preset works. You can modify the preset settings from `.neutrinorc.js` by an options object.\n\nThe following shows how you can pass an options object to the preset and override its options, showing the defaults:\n\n#### .neutrinorc.js\n\n```js\nlet reactNodegui = require('neutrino-preset-react-nodegui')\n\nmodule.exports = {\n   use: [\n      reactNodegui({\n         // Inject an application startup launcher. When `false` you need to setup mounting and HMR in your sorce code\n         launcher: true,\n\n         // Clear console on every build\n         clean: true,\n\n         // The process title\n         title: `${packageJson.name} ${packageJson.version}`,\n\n         // Automatically open app on `npm start` and attach it to the compilation process\n         open: true,\n\n         // Enable source maps in the production build. Development sourcemaps are not affected and always turned on\n         sourcemaps: false,\n\n         // Add all necessary polyfills required to support NodeJS depending on the usage in the code\n         polyfills: true\n      })\n   ]\n}\n```\n\n*Example: Disable auto-opening and always generate sourcemaps:*\n\n#### .neutrinorc.js\n\n```js\nlet reactNodegui = require('neutrino-preset-react-nodegui')\n\nmodule.exports = {\n   use: [\n      reactNodegui({\n         sourcemaps: true,\n         open      : false\n      })\n   ]\n}\n```\n\n## Customizing\n\nConsumers may provide their custom Webpack configurations for different parts of the current preset that will override its defaults. Also if you want to construct your own preset based on `neutrino-preset-react-nodegui` you can use information below.\n\nTo override the build configuration, start with the documentation on [customization](https://neutrino.js.org/customization). `neutrino-preset-react-nodegui` creates some conventions to make overriding the configuration easier once you are ready to make changes. Following the customization guide and knowing the rule, loader, and plugin IDs, you can override and augment the build by providing a function to your `.neutrinorc.js` use array. You can also make these changes from the Neutrino API in a custom middleware.\n\nBy default Neutrino, and therefore this preset, creates a single **main** `index` entry point to your application, and this maps to the `index.*` file in the `src` directory.\n\n\u003e **Important! This preset has a limitation – it supports only a single entry point when the launcher option is enabled. Defining 2 or more may cause it to work not properly.**\n\nYou can customize a single entry point in your `.neutrinorc.js` and override a default one\n\n```js\nlet reactNodegui = require('neutrino-preset-react-nodegui')\n\nmodule.exports = {\n   options: {\n      mains: {\n         index: './App.jsx'\n      }\n   },\n   use: [\n      reactNodegui()\n   ]\n}\n```\n\n### Launcher\n\nThis preset wraps your application with NodeGUI renderer and Hot container. It can be configured using `launcher` property in the [preset options](#preset-options). So you don't need to think about how to mount and render your application. This is completely managed by `neutrino-preset-react-nodegui` preset.\n\nIf you want to **disable** the launcher you need to explicitly set the option to `false`\n\n```js\nreactNodegui({\n   launcher: false\n})\n```\n\nThis turns your application into a regular Node.js application. You will have to manage starting by yourself as it is described in [NodeGUI documentation](https://react.nodegui.org/docs/guides/tutorial).\n\n## Webpack config\n\nSometime you want to extend Webpack configuration with custom loaders or plugins. This can be done in `.neutrinorc.js` file using [Neutrino API](https://neutrinojs.org/webpack-chain/) also known as [`webpack-chain`](https://www.npmjs.com/package/webpack-chain).\n\n### Plugins\n\nFor example, you can add [TypeScript checking](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin)\n\n```js\nlet reactNodegui = require('neutrino-preset-react-nodegui')\nlet TsChecker    = require('fork-ts-checker-webpack-plugin')\n\nmodule.exports = {\n   use: [\n      reactNodegui(),\n      function (neutrino) {\n         let productionMode = (process.env.NODE_ENV === 'production')\n\n         if (productionMode) return\n\n         neutrino.config\n            .plugin('ts-checker')\n               .use(TsChecker, [{\n                  // options\n               }])\n               .end()\n      }\n   ]\n}\n```\n\nSpecifically for this plugin you also need to create `tsconfig.json` file\n\n```json\n{\n   \"compilerOptions\": {\n      \"target\": \"es2016\",\n      \"module\": \"commonjs\",\n      \"jsx\": \"react\",\n      \"strict\": true,\n      \"alwaysStrict\": true,\n      \"moduleResolution\": \"node\",\n      \"esModuleInterop\": true\n   },\n   \"include\": [\"src/**/*\"],\n   \"exclude\": [\"node_modules\"]\n}\n```\n\nIt will enable highlighting in your code editor too.\n\n## VSCode tips\n\n### Project settings\n\nThese are suggested workspace settings for VSCode editor:\n\n#### .vscode/settings.json\n\n```json\n{\n   \"files.autoSave\": \"onFocusChange\"\n}\n```\n\nThis should prevent building as you type code.\n\n### Launching in the VSCode Debugger\n\nVisual Studio Code has its own built-in debugger. You may launch and debug your application in the development and production modes using it. Add this configuration:\n\n#### launch.json\n\n```json\n{\n   \"version\": \"0.2.0\",\n   \"configurations\": [\n      {\n         \"name\": \"Start\",\n         \"type\": \"node\",\n         \"request\": \"launch\",\n         \"program\": \"${workspaceFolder}/node_modules/webpack/bin/webpack.js\",\n         \"args\": [\"--mode\", \"development\"],\n         \"autoAttachChildProcesses\": true,\n         \"internalConsoleOptions\": \"openOnSessionStart\",\n         \"skipFiles\": [\"\u003cnode_internals\u003e/**\"],\n         \"sourceMaps\": true\n      },\n      {\n        \"name\": \"Open\",\n        \"type\": \"node\",\n        \"request\": \"launch\",\n        \"cwd\": \"${workspaceFolder}\",\n        \"runtimeExecutable\": \"${workspaceFolder}/node_modules/.bin/qode\",\n        \"windows\": {\n          \"runtimeExecutable\": \"${workspaceFolder}/node_modules/.bin/qode.cmd\"\n        },\n        \"args\": [\"./build/index.js\"],\n        \"outputCapture\": \"std\",\n        \"skipFiles\": [\"\u003cnode_internals\u003e/**\"],\n        \"sourceMaps\": true\n      },\n      {\n        \"name\": \"Debug\",\n        \"type\": \"node\",\n        \"request\": \"attach\",\n        \"port\": 9229,\n        \"skipFiles\": [\"\u003cnode_internals\u003e/**\"],\n        \"sourceMaps\": true\n      }\n   ]\n}\n```\n\nUse these 3 tasks for different purposes\n\n- **Start** instead of `npm start`. Builds with live reloading and opens app.\n- **Open** instead of `npm run open`. Opens what was built.\n- **Debug** when want to attach to a manually opened app with `--inspect` flag.\n\n## CI/CD tips\n\n### Travis CI\n\nTo build your application in [Travis](https://travis-ci.com/) you need to configure a compatible environment. Suggested settings to make it work are\n\n#### .travis.yml\n\n```yml\nos: linux\ndist: bionic\nlanguage: node_js\nnode_js:\n  - \"12\"\nbefore_install:\n  # OpenGL\n  - sudo apt-get install libgl1-mesa-dev\n```\n\n## Knowledge base\n\n- [Qt Quick QML Types](https://doc.qt.io/qt-5/qtquick-qmlmodule.html)\n- [The Style Sheet Syntax](https://doc.qt.io/qt-5/stylesheet-syntax.html)\n- [Qt Style Sheets Examples](https://doc.qt.io/qt-5/stylesheet-examples.html)\n- [Qt Style Sheets Reference](https://doc.qt.io/qt-5/stylesheet-reference.html)\n\n[npm-image]: https://img.shields.io/npm/v/neutrino-preset-react-nodegui.svg\n[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-react-nodegui.svg\n[npm-url]: https://npmjs.org/package/neutrino-preset-react-nodegui\n[build-status]: https://travis-ci.com/constgen/neutrino-preset-react-nodegui.svg?branch=master\n[travis-url]: https://travis-ci.com/constgen/neutrino-preset-react-nodegui\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconstgen%2Fneutrino-preset-react-nodegui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconstgen%2Fneutrino-preset-react-nodegui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconstgen%2Fneutrino-preset-react-nodegui/lists"}