Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Upgrading a Webpack project

Jump to bottom
Warrick Bayman edited this page Apr 7, 2022 · 2 revisions

Vitamin is generally intended to be used on a fresh Laravel install, but that doesn't mean you can't upgrade an existing Webpack project. There's just a few more steps you need to take. Trust me, it's worth it.

I might add this sort of functionality to the Vitamin installation process, but for now, it's still a few manual steps you'll need to take.

This assumes you're already using Inertia and Vue 3. If you're not there yet, then you might have a much bigger upgrade on your hands.

Install

Install the Vitamin package:

composer require thepublicgood/vitamin

However, don't run the vitamin:init command like the README suggests. Doing so could overwrite project files you've already set up. Instead, we need to make copies of the files we need and install the dependencies manually. Firstly, get the required dependencies installed:

yarn add @vitejs/plugin-vue @vue/compiler-sfc vite

I'm assuming you already have Inertia up and running. Vitamin generally installs a few additional NPM dependencies, but they're more "nice-to-haves" than requirements.

Just in case, it's always good idea to make sure the lastest version of Vue is installed:

yarn add vue

Next, copy the bare minimum from the vitamin package directory.

cp vendor/thepublicgood/vitamin/config/vitamin.php ./config/
cp vendor/thepublicgood/vitamin/stubs/LocalValetDriver.php ./
cp vendor/thepublicgood/vitamin/stubs/jsconfig.json ./
cp vendor/thepublicgood/vitamin/stubs/vite.config.js ./

There are a few other files you can use if you'd like. For example, Vitamin has an opnionated route helper which you can install:

cp vendor/thepublicgood/vitamin/stubs/Router.js ./resources/js/Scripts/Routing/Router.js

If you've already got Tailwind set up then you'll probably not want to copy the Vitamin Tailwind config, but if you need it:

cp vendor/thepublicgood/vitamin/stubs/postcss.config.js ./
cp vendor/thepublicgood/vitamin/stubs/tailwind.config.js ./

Once you've copied all the files you need, you'll need to go through them and replace the string $JSPATH$ with the directory your JavaScript sources are found. Since this is relative to the resources directory, it's is likely just: js. The files you'll need to update are:

  • jsconfig.json
  • vite.config.js
  • tailwind.config.js

Update app.blade.php

The only update you need to make to app.blade.php is to replace your app.js and app.css references with {!! $vitamin !!}. Here's a simple example of an app.blade.php file:

<!doctype html>  
<html>  
<head>  
    <title>My Site</title>  
    <meta charset="UTF-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
  
    {!! $vitamin !!}  
</head>  
<body>  
    @inertia  
</body>  
</html>

Update JavaScript

You'll need to make some changes to your bootstrap.js file as well. The require function is a Webpack convension and since Vite uses ES modules, you'll need to replace these with import statements. At the very least, you'll probably need:

import _ from 'lodash';  
import axios from 'axios';  
  
window._ = _;  
window.axios = axios;

//...

If you're using Laravel Echo, then that needs to be updated as well:

import Echo from 'laravel-echo';  
import Pusher from 'pusher-js';  
window.Pusher = Pusher;

//...

You'll probably also need to make similar changes to your app.js file. However, if you've installed Inertia following the documentation, you might already be fairly close. A simple solution might look like this:

import '../css/app.css';  
import './bootstrap';  
  
import { createApp, h } from 'vue'  
import { createInertiaApp } from '@inertiajs/inertia-vue3'  
import { InertiaProgress } from "@inertiajs/progress";  
  
InertiaProgress.init();  
  
createInertiaApp({  
    resolve: async (name) => {  
        const pages = import.meta.glob('../$PAGESPATH$/**/*.vue')  
  
        return (await pages[`../$PAGESPATH$/${name}.vue`]()).default;  
    },
    setup({ el, app, props, plugin }) {  
        createApp({ render: () => h(app, props) })  
            .use(plugin)  
            .mount(el);  
    },
});

Lastly, update the scripts in your package.json file:

{
    "scripts": {
        "dev": "php ./artisan vitamin:serve",
        "production": "vite build",
        "prod": "yarn production",
        "routes": "php ./artisan ziggy:generate resources/js/Scripts/Routing/Ziggy.js"
    }
}

That should be it. You can now safely remove all the webpack related dependencies. To start you dev server, simply run:

yarn dev
Clone this wiki locally