Gathering detailed insights and metrics for universal-scripts
Gathering detailed insights and metrics for universal-scripts
Installations
npm install universal-scriptsDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=18
Node Version
20.18.2
NPM Version
10.8.2
Releases
Unable to fetch releases
Languages
7
JavaScript
TypeScript
HTML
SCSS
Shell
CSS
Procfile
JavaScript (60.64%)
TypeScript (33.98%)
HTML (2.71%)
SCSS (1.79%)
Shell (0.76%)
CSS (0.06%)
Procfile (0.05%)
Developer
GlueDigital
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
23 Stars
423 Commits
1 Forks
1 Watchers
24 Branches
5 Contributors
Updated on May 19, 2025
Maintainers
6
Package Meta Information
Latest Version
3.6.4
Package Id
universal-scripts@3.6.4
Unpacked Size
65.28 kB
Size
20.26 kB
File Count
49
NPM Version
10.8.2
Node Version
20.18.2
Published on
May 19, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
39
@gluedigital/universal-plugin-helmet@gluedigital/universal-plugin-jest@pmmmwh/react-refresh-webpack-plugin@reduxjs/toolkit@swc/core@swc/helperschalkcookie-parsercopy-webpack-plugincross-spawncss-loadercss-minimizer-webpack-plugindirectory-named-webpack-plugindotenvexpressfs-extrajs.conf.djs.conf.d-webpackjsescmini-css-extract-pluginpostcsspostcss-importpostcss-loaderpostcss-nestedpostcss-normalizepostcss-preset-envpostcss-urlreact-refreshrequire-from-stringruse-fetchstyle-loaderswc-loaderswc-minify-webpack-plugintsconfig-paths-webpack-plugintypescriptwebpackwebpack-dev-middlewarewebpack-hot-middlewarewebpack-node-externals
Peer Dependencies
5
Universal Scripts
Universal Scripts is a highly flexible framework for React projects, offering advanced features such as Server-Side Rendering (SSR) and internationalization (i18n). It allows you to extend or override existing configuration easily, giving you complete control over your setup.
- Server-Side Rendering.
- TypeScript support including custom aliases.
- Internationalization with
react-intl, - Metadata management with
react-helmet-async. - Redux state management with
redux-toolkitand types support. - Integrated with
ruse-fetchto provide a modern way of fetching data withSuspense. - Use
SWCfor better performance. - Hot Reload in Server and Client, including .env file.
Project Structure
You can use the pre-built templates, such as the TypeScript template, or create your own to match your preferences. Below are the main folders defined in the default template:
src/locales: Store your translations, the first key inindex.tsis the default language.src/routes: The index file serves as the root component, where you can define your application routes withreact-router.src/static: Contains static assets like images, fonts, etc. These files will be copied to the build.src/store: Add your slices and place them inside the slices folder.src/styles: The main entry point for global styles.
These are the default folders, but you can create additional ones such as components, hooks, contexts, and more. Additionally, the tsconfig file includes predefined aliases, which you can customize or extend as needed.
Plugins
In Universal, you have the flexibility to use pre-built plugins or develop your own. These plugins are designed to work seamlessly without requiring any additional configuration—just install them, and they are ready to use. This allows for a more efficient development process, enabling you to extend functionality effortlessly while maintaining a clean and modular project structure.
This documentation describes the configuration of the following universal pre-installed plugins in a project:
universal-plugin-helmet
This plugin introduces configuration for react-helmet-async, enabling efficient metadata management in React applications.
Features:
- Enables full functionality of react-helmet-async.
- Allows dynamic <head> management in a React application.
- Improves SEO optimization and accessibility.
- Enables customizable social sharing with dynamic Open Graph metadata.
universal-plugin-jest
This plugin configures Jest, to run your test suites.
Features:
- Configures Jest for unit and integration testing.
- Use SWC for better performance.
Custom Plugins
In addition to the pre-installed plugins, you can create your own plugins or use other existing ones, such as the universal-plugin-sass for Sass support.
If you want to use for example universal-plugin-sass you just have to install this as a dependency. And universal will recognize them without any configuration.
1yarn add universal-plugin-sass
If using npm
1npm install universal-plugin-sass
Data Fetching
Universal is already configured to use ruse-fetch, making data fetching simple and efficient.
1import { useFetch } from 'ruse-fetch' 2 3const Users = () => { 4 const users = useFetch('https://reqres.in/api/users') 5 return ( 6 <ul> 7 {users.data.map((u) => ( 8 <li key={u.id}>u.first_name</li> 9 ))} 10 </ul> 11 ) 12} 13 14const Home = () => { 15 return ( 16 <section> 17 ... 18 <Suspense fallback={<span>Loading...</span>}> 19 <Users> 20 </Suspense> 21 ... 22 </section> 23 ) 24} 25
Integration with Redux Toolkit
To maintain a structured and scalable Redux store in your application, follow this setup.
Folder Structure
Inside the store directory, use the slices folder where all your Redux slices will be stored. Then, import all slices into the central reducers file.
This ensures that Universal will automatically recognize all slice types and include them in the store, providing full type safety.
Using useAppSelector
With useAppSelector, you can access the fully-typed Redux store, including elements provided by Universal.
Example: Language Selector Component
1 2import { updateIntl, useAppDispatch, useAppSelector } from 'universal-scripts' 3import locales from 'src/locales' 4 5function SelectLanguage() { 6 const locale = useAppSelector((state) => state.intl.lang) 7 const dispatch = useAppDispatch() 8 9 const changeLang = (event) => { 10 const lang = event.target.value 11 dispatch( 12 updateIntl({ 13 lang, 14 messages: locales[lang] 15 }) 16 ) 17 } 18 19 return ( 20 <select value={locale} onChange={changeLang}> 21 {Object.keys(locales).map((lang) => ( 22 <option key={lang} value={lang}> 23 {lang.toUpperCase()} 24 </option> 25 ))} 26 </select> 27 ) 28}
Enviroment Variables
Environment variables are declared in the .env file. These variables are not included in the generated build by default, ensuring that sensitive information is not stored in the build. The variables are read during the application startup and are sent from the server to the client. Only variables that start with PUBLIC_ are passed from the server to the client. If server-side rendering (SSR) is disabled, the variables are still sent to the client in the same way.
If you modify the .env file in development, Universal will automatically perform a hot reload with the updated variable values. In production mode, you only need to restart the app to apply the new variables—there’s no need to rebuild the app to see the changes.
Inner Structure
This section explains how the main folders work in Universal. The core is built around js.conf.d, which allows us to split the configuration into multiple files. This approach makes it possible to create new configurations or even override the built-in ones.
build.conf.d– Contains everything related to the Webpack bundling process.runtime.conf.d– Manages configurations related to the runtime of the application, such as redux, render....lib– Provides common functionality and utilities.scripts– Contains scripts defined in thescriptssection ofpackage.json, used for automation and task execution.server– The main entry point for the server, containing all configurations for Express and middleware setup.client– The main entry point for the client-side application.
With this structure configurations in this way, Universal enables modular, maintainable, and customizable setups. 🚀
Check out the documentation to explore all features or follow the getting started guide.
Configuration
For common use cases, support has been added to define configuration in a universal.config.mjs file located at the root of your application.
You can export a plugins object to customize specific plugin options, and a default export for the main Universal configuration.
Currently, the following options are supported:
-
noSsr: Disables server-side rendering. The server will return a minimal HTML file that only loads the client scripts. -
extraBuilds: An array of strings representing the names of additional builds to include.
No vulnerabilities found.
Reason
17 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/29 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Reason
68 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-x55w-vjjp-222r
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
- Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
3
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More