Job vite-webpack-spa-to-vite · revised 11 October 2026

Move one Webpack single-page app to Vite with its routes, settings and tests intact

Replace the Webpack build of one browser app with Vite: every loader and plugin accounted for, environment variables renamed safely, and the same routes rendering from the new build.

You might be seeing

The Webpack config is long, nobody remembers why each loader is there and upgrades are avoided
The dev server takes a long time to start or reload after a change
A loader or plugin has no release for the team's current Node.js

Enquire — from £795 Check if it fits first What to send us

No passwords, keys, card details or admin invites needed to start.

From £795

Final price agreed before we start

From £795 for one client-side app with up to 200 source files and one Webpack configuration. We read the configuration and the loader list before a final fixed quote. Server rendering, module federation, old-browser support or a plugin without an equivalent lead to a separate decision or a stop.

You pay: After the agreed checks pass and you sign off. No advance payment.
Includes: One browser app moved from Webpack to Vite; Inventory of every Webpack feature with its replacement or decision; Environment-variable table, CI build update and route checks on the production build
Technology: Vite, webpack, JavaScript, npm, Webpack 4 or 5 to Vite, the current major at scoping
Delivery: Start window and delivery date agreed in writing after eligibility and access checks.

This is a new fixed-price service. We agree scope and checks with you before starting, and you pay after it works and you sign off.

Enquiry only: no checkout, charge or booking. The written quote confirms the total price and any applicable tax before you accept.

What usually happened

A Webpack config holds the app's history: loaders, aliases, environment injection, glob-style imports and proxy settings. Moving to Vite is not a rename. Vite serves native ES modules in development, so require() calls in the app's own code must become imports, webpack's require.context needs a different mechanism, and environment variables are only exposed to the browser when they start with a chosen prefix, so every setting the app reads has to be found and renamed. Vite transpiles TypeScript without type-checking it, so a type check that used to run inside the build can silently disappear.

Who it’s for: A founder or engineering lead whose browser app builds with Webpack and whose developers wait on slow builds or are stuck on an old Webpack toolchain that is hard to keep working.

Usually starts when: A Webpack or loader upgrade has become a project of its own, the build no longer runs on the team's current Node.js, or the team has standardised on Vite elsewhere and wants one build tool.

The result: One browser app builds and runs with Vite. Every Webpack loader, plugin, alias, proxy and environment setting is listed with its replacement or a documented decision, the agreed routes render from the production build, no secret is exposed through the new variable prefix, and the existing tests and type check still pass.

Check whether this job fits

Five short questions. Your answers stay on this page unless you choose to email them.

Which build tool does the app use today?

Webpack 4 or 5 Webpacker inside a Rails app Create React App or another wrapper Not sure

Where does the app render?

In the browser only On the server as well

Do you need to support old browsers?

No, current browsers only Yes, older ones

Does the browser code read settings such as API addresses from environment variables?

Yes, public values like URLs Yes, including keys or tokens No

Are there tests or a type check that run today?

Yes No

Answer the questions to see whether this job fits.

Nothing is sent anywhere until you choose to email us.

Send an enquiry about this outcome

How to read your answers: any answer below means this fixed job needs a closer look or doesn’t fit.

Which build tool does the app use today? Webpacker inside a Rails app: Rails apps that use Webpacker need their asset integration changed as well. Describe the app and ask for a separate scope; the Rails upgrade job lists the JavaScript build as a decision. Rails 7 to 8.1 upgrade
Which build tool does the app use today? Create React App or another wrapper: Send the tool name and version. Some wrappers hide the Webpack configuration, which changes the inventory.
Which build tool does the app use today? Not sure: Look for webpack in package.json and a webpack config file; send the version.
Where does the app render? On the server as well: Server-side rendering from the same Webpack build is outside this fixed job.
Do you need to support old browsers? Yes, older ones: Vite's production build targets modern browsers by default, and its documentation points to a separate legacy plugin for older ones, which is outside this fixed job. Name the browsers you must support before asking for a price.
Does the browser code read settings such as API addresses from environment variables? Yes, including keys or tokens: Vite's documentation warns that prefixed values are baked into the browser bundle, so secrets must not be among them. We list each one and agree where it moves.
Are there tests or a type check that run today? No: Acceptance will rest on the route list and a written visual check of each route; tell us the routes.

Checks you can run yourself

Find the build tool versions
Run this in a copy of the project folder and send the matching lines.
```
grep -E "\"(webpack|webpack-cli|webpack-dev-server|vite)\"" package.json
```
Look for: The webpack line and its version. If a vite line already exists, tell us.
Find environment reads in browser code
Run this read-only search in the source folder and send the variable names it finds, not their values.
```
grep -rhoE "process\.env\.[A-Za-z0-9_]+" src | sort -u
```
Look for: A list of names such as process.env.API_URL. Send the names only.

What you get

The Vite configuration and changed source as a pull request
The inventory of Webpack features with the replacement for each
A table of environment variables with old name, new name and whether the value is public
Before-and-after build output listings and size figures, for information

Included

One browser single-page app with up to 200 source files and one Webpack configuration, or one shared base with up to two environment files
An inventory of every Webpack loader, plugin, alias, dev-server proxy, environment injection and glob-style import, each with a Vite equivalent or a decision
Converting require() calls in the app's own source to imports and glob-style imports to Vite's glob mechanism
Renaming each environment setting the browser code reads to a prefixed Vite variable, and listing any that must stay on the server
Updating package scripts, CI build and output-directory settings, and keeping the type check as a separate step where the app uses TypeScript

Not included

Server-side rendering frameworks, module federation or micro-frontend setups
Support for browsers older than Vite's default build targets, which its documentation sets by the Baseline Widely Available list
Upgrading React, Vue or other libraries, converting to TypeScript or changing the test runner
Moving a Rails app off Webpacker, which is a separate job
Promising a faster or smaller build: figures are recorded, not guaranteed

How we know it’s done

Agreed with you before work starts. Each check produces evidence you keep.

The Vite production build finishes with no error, and serving its output with a static server renders each agreed route with the same page title and key element as the Webpack build
Evidence: Build log, route list with a pass or fail per route, and screenshots for each route
Every Webpack loader, plugin, alias, proxy, environment injection and glob-style import in the original configuration appears in the inventory with a Vite replacement or a decision you have accepted
Evidence: The inventory, compared line by line with the original configuration by the reviewer
Each environment setting read by browser code is listed with old name, new name and public or server-only status, and a search of the production bundle finds none of the values classed as server-only
Evidence: The environment table and the bundle search output
The existing tests pass as before, and where the app uses TypeScript a separate type-check command finishes with no errors, both locally and in CI
Evidence: Test and type-check output before and after, and the CI run link

Sign-off. You review the inventory, the environment table and the route results, then merge the pull request and deploy under your own gates. Recorded build times and sizes are information, not part of acceptance.

If it fails. If the agreed acceptance checks do not pass, you do not pay and you keep our inventory and findings.

When it fits, and when we stop

It fits when

The app is a client-side single-page app built by Webpack 4 or 5 with a lockfile and a runnable build command
It runs on a Node.js version that the current Vite release supports, or the runtime can be moved first
You can list the routes that must render and any settings that differ between environments
A person on your side can review the pull request and your team deploys the build under its own gates

We stop and tell you if

The app must support browsers older than Vite's default build targets
The build relies on a Webpack plugin or loader with no Vite equivalent and no accepted alternative
The app is server-rendered from the same Webpack build, or uses module federation
Environment settings include secrets that the browser code reads directly and cannot be moved behind a server

What could go wrong

The change is a pull request your team merges, so it can be reverted like any other. Keep the Webpack configuration available on the previous branch until your team has deployed the Vite build and checked it.

Scroll the table sideways to read it all.

Risk	How we handle it
A secret is exposed because it was given the public prefix	Vite's documentation says prefixed values are baked into the bundle at build time, so every variable is classed as public or server-only before renaming, and the reviewer checks the final bundle for any value that is not public.
A webpack-specific loader behaviour has no equivalent and the page quietly changes	The inventory names every loader and plugin with a decision, and the route check compares rendering before and after.
Type errors stop being caught because Vite only transpiles	Vite's documentation says it does not type-check, so a separate type-check command is added to the scripts and CI.

A second reviewer checks the environment-variable table for anything secret, re-reads the inventory against the original configuration and re-runs the route checks from the handover notes alone.

How we deliver

We arrange the work and independent review, then show you the result against the agreed checks. You keep authority over your systems.

Agree the route list and the definition of done, build the app with Webpack on a copy and record the production output, the test results and each route's rendering as the baseline
List every loader, plugin, alias, proxy, environment injection and glob-style import in the Webpack configuration
Add the Vite configuration and replace each item, converting require() calls and glob-style imports in the app's own source
Rename each browser-read setting to the prefixed variable, keep any secret out of the browser bundle, and keep the type check as a separate step
Build for production with Vite, serve the output with a static server and render each agreed route, then re-run the tests
Independent review of the configuration and the environment table, then hand over the pull request with the evidence and the steps to revert it

This is a one-off job, not emergency cover or a subscription. We confirm eligibility, the total price, a start window and a delivery date before you accept. Work starts only after agreed inputs, secure access, any licences and necessary permissions are in place. Hosting, platform and supplier charges are excluded unless the written quote includes them. No charge or booking is created by an enquiry.

Need to keep it working?

Discuss a monthly service that keeps the build tool and dependencies on supported versions.

Ongoing work is separately scoped and quoted: no monitoring, response-time guarantee or automatic subscription is included in this job.

Explore an ongoing engineering lane, or mention the responsibility you need in your enquiry.

What you can check

This is a new service. We have not delivered this job for a client yet.

Other ways to get this done

If the Webpack build works and the team is not blocked by it, leaving it alone is a valid choice. This job is for teams that have decided to move.
Vite's documentation describes its environment-variable handling; a team with time to review a long Webpack configuration can follow it directly. vite.dev
Vite's features guide describes glob imports with import.meta.glob, the Vite feature for importing many modules at once, which a team can read before deciding how to replace Webpack's glob-style imports. vite.dev

Questions

Will the build be faster?

We record the build times before and after, but we do not promise a result. Acceptance is about the app rendering and behaving the same, not about speed.

Do I need to change my framework or tests?

No. Upgrading React or Vue, converting to TypeScript or changing the test runner are separate jobs.

What if one of my Webpack plugins has no Vite equivalent?

We say so with the evidence and agree a replacement with you, or stop. You do not pay for a result that does not pass its checks.

Send an enquiry

Send us

The Webpack and Node.js versions, and the framework the app uses
The names of the loaders and plugins in your configuration, not the config file
How the app reads settings, such as process.env names in the browser code
The routes that must render, and where the build is deployed

Later, once you agree

A controlled copy of the source and configuration with secrets removed, through the agreed company-controlled secure handoff
Build and test commands, and the CI configuration with secrets removed
A list of environment names with example non-secret values for a staging build
A company-controlled secure handoff agreed before access: no live passwords, keys, private code or customer records by ordinary email.

You own the code, build pipeline and hosting. We work from an authorised copy with secrets removed and return a pull request that your team reviews, merges and deploys. We never ask for passwords or tokens in the first enquiry.

Email fallback: open your mail app

If website submission is unavailable, review and send the fallback email yourself. An email fallback is not a website receipt. Or write to hello@syntheticindustry.ai with “vite-webpack-spa-to-vite” as the subject.