SvelteAndNWJSForWindowsXP Svelte Themes

Svelteandnwjsforwindowsxp

This is a template for creating easily software for Windows XP with NW.js 15.4 (Latest possible version of NWjs that can successfully start on XP, which isn't the publicly known - 14.7). And Sveltekit (because it's pretty lightweight, easy to prototype and use and doesn't take up a loo of drive memory).

Svelte & NW.js for Windows XP

This repository provides a template for creating Windows XP-compatible software using NW.js 15.4 (the last XP-supported version) and SvelteKit for a lightweight and efficient UI framework.


šŸ”§ Prerequisites

1ļøāƒ£ Node.js & NVM Setup

  • Install NVM and Node.js v6.2.2 (matching NW.js 0.15.4ā€™s internal Node.js version).
  • This ensures that incompatible code is detected early.

2ļøāƒ£ Folder Structure

BuiltApp/
ā””ā”€ā”€ XPlor/
    ā”œā”€ā”€ locales/
    ā”œā”€ā”€ package.nw/
    ā”‚   ā”œā”€ā”€ fonts/
    ā”‚   ā”œā”€ā”€ images/
    ā”‚   ā”œā”€ā”€ public/
    ā”‚   ā”‚   ā”œā”€ā”€ build/
    ā”‚   ā”‚   ā”œā”€ā”€ data/
    ā”‚   ā”‚   ā”œā”€ā”€ ignore/
    ā”‚   ā”‚   ā”œā”€ā”€ images/
    ā”‚   ā”‚   ā”œā”€ā”€ scripts_compiled/
NW_Cache/
ā”œā”€ā”€ nwjs-sdk-v0.15.4-win-ia32/
ā”‚   ā”œā”€ā”€ locales/
ā”‚   ā”œā”€ā”€ pnacl/
ā”œā”€ā”€ nwjs-sdk-v0.93.0-win-x64/
ā”‚   ā”œā”€ā”€ locales/
ā”‚   ā”œā”€ā”€ swiftshader/
ā”œā”€ā”€ nwjs-v0.12.3-win-ia32/
ā”‚   ā”œā”€ā”€ locales/
ā”œā”€ā”€ NWTemp/
ā”‚   ā”œā”€ā”€ nwjs-sdk-v0.15.4-win-ia32/
ā”‚   ā”‚   ā”œā”€ā”€ locales/
ā”‚   ā”‚   ā”œā”€ā”€ pnacl/
ā”‚   ā”œā”€ā”€ nwjs-v0.12.3-win-ia32/
ā”‚   ā”‚   ā”œā”€ā”€ locales/
ā”‚   ā”œā”€ā”€ nwjs-v0.15.4-win-ia32/
ā”‚       ā”œā”€ā”€ locales/
ā”œā”€ā”€ package.nw/
ā”‚   ā”œā”€ā”€ public/
ā”‚   ā”‚   ā”œā”€ā”€ scripts/
ā”‚   ā”‚       ā”œā”€ā”€ executables/
SourceCode/   <== šŸ—‚ This Repository
ā”œā”€ā”€ rollup.config.js
ā”œā”€ā”€ package.json
ā”œā”€ā”€ CompileBabel.js
ā”œā”€ā”€ BuildApp.js
ā”œā”€ā”€ .env
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ BuildAppTools/
ā”‚   ā”œā”€ā”€ npmInstall.cmd
ā”œā”€ā”€ fonts/
ā”œā”€ā”€ images/
ā”œā”€ā”€ lib/
ā”‚   ā”œā”€ā”€ dts/
ā”‚   ā”‚   ā”œā”€ā”€ jquery/
ā”œā”€ā”€ node_modules/
ā”œā”€ā”€ public/
ā”‚   ā”œā”€ā”€ index.html
ā”‚   ā”œā”€ā”€ package.json
ā”‚   ā”œā”€ā”€ global.css
ā”‚   ā”œā”€ā”€ devTools.js
ā”‚   ā”œā”€ā”€ build/
ā”‚   ā”‚   ā”œā”€ā”€ bundle.js
ā”‚   ā”‚   ā”œā”€ā”€ bundle.css
ā”‚   ā”œā”€ā”€ scripts_compiled/
ā”‚   ā”‚   ā”œā”€ā”€ executables/
ā”‚   ā”‚   ā”œā”€ā”€ main/
ā”‚   ā”‚   ā”œā”€ā”€ modules/
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ main.js
ā”‚   ā”œā”€ā”€ App.svelte
ā”‚   ā”œā”€ā”€ components/
ā”‚   ā”œā”€ā”€ scripts/
ā”‚   ā”‚   ā”œā”€ā”€ main/
ā”‚   ā”‚   ā”œā”€ā”€ modules/

šŸš€ Development Workflow

1ļøāƒ£ Start Development Mode

npm run dev
  • This compiles src/ into public/build/bundle.js
  • Refresh the app to see changes.

2ļøāƒ£ Building for Release

node BuildApp.js
  • Modify BuildApp.js before running.
  • Output location:
    BuiltApp/{YourProjectName}/{YourProjectName}.exe
    

šŸ“¦ Running Multiple Instances

Include multipleInstances.js in index.html:

<script src="multipleInstances.js"></script>

Why?

  • NW.js prevents multiple instances of the same package.json by default.
  • This script generates a UUID-based app name per run.

āš  Issue: NW.js fills %LOCALAPPDATA% with {AppName}-{RandomNumber} folders.
Solution: Use the following launch parameter:

--user-data-dir=./NWProfile
  • This anchors all profiles into NWProfile/, avoiding clutter.

šŸ”’ Packing & Hiding Source Code

To hide your source code inside the executable:

  1. Navigate to package.nw
  2. Select all files ā†’ Zip them
  3. *Rename package.zip* ā†’ *package.nw
  4. Merge into the executable:
    copy /b YourProject.exe+package.nw FinalExecutable.exe
    
  5. Done! Your code is now embedded in the EXE.

āš  Warning: NW.js extracts the package on launch, so this slows down startup
depending on file count and size.


āš  Important Notes About NW.js & Windows XP

Any NW.js version higher than 0.12.3 has an issue on Windows XP:

  • If you use child_process, http, or https, and there is no internet, the application will crash.
  • For offline applications, use NW.js 0.12.3.
  • For online applications, use NW.js 0.15.4.

šŸ›  Built-in Utilities

File Description
element.js Utility functions for HTML element calculations.
multipleInstances.js Enables multiple NW.js instances at once.

šŸ›  Developer Instructions

šŸ“Œ Setting Up NW.js Versions.

  1. Open package.json, add available NW.js versions.
  2. Set the desired version in .env (set APPLICATION_NAME here).
  3. Run:
    npm run dev
    

šŸ“Œ JavaScript Modules

If you're using custom .js scripts:

1ļøāƒ£ Write Your Scripts

  • Place them inside:
    src/scripts/**/*
    

2ļøāƒ£ Watch & Compile JS

npm run watch_js_modules

3ļøāƒ£ File Output

  • For NW.js 0.15.4 and earlier ā†’ Transpiled with Babel
    ā†’ Stored in public/scripts_compiled/**/*
  • For NW.js 0.16+ ā†’ Only copied, no transpilation.

4ļøāƒ£ Include Scripts

<script src="public/scripts_compiled/my_script.js"></script>

šŸ“¦ Creating a Portable Build

  1. Modify public/package.json
  2. Adjust & run:
    node BuildApp.js
    
  3. Final portable version in:
    BuiltApp/{YourProjectName}/
    
  4. Optional: Create an installer in the root directory.
    • Configure .env with APPLICATION_NAME
    • Use Inno Setup or similar to package everything.
    • For reference, check the XPCode repository.

šŸ“¢ Future Improvements

  • SCSS support
  • Enhanced build automation
  • Better XP compatibility

See also

Top categories

Loading Svelte Themes