Node.js Support

PHPSandbox Notebooks are equipped with the convenience of having Node.js and NPM (Node Package Manager) pre-installed. This robust feature empowers you to effortlessly incorporate various JavaScript-related libraries, such as Vite, Laravel mix, Webpack, and many others, into your projects. It's worth noting that we prioritize staying up to date with the latest stable releases of Node.js and NPM. Currently, our supported versions are Node v18.16.1 and NPM v9.7.2. Rest assured that any changes or updates made to the supported versions will be promptly documented and communicated to our users, ensuring that you can leverage the most recent features and enhancements.

RUNNING VITE IN LARAVEL BASED NOTEBOOKS

PHPSandbox offers built-in support for running Vite in your Laravel-based notebooks. We provide notebook templates that come preconfigured with settings, making it incredibly easy to start using Vite without any additional setup required. These templates include all the necessary configurations to seamlessly integrate Vite into your Laravel projects.

• Laravel Breeze (Blade, React, Vue)
• Laravel Breeze (NextJS + API)
• Laravel Jetstream (Livewire)
• Laravel Jetstream (Inertia)

When creating your Notebook, using any of these templates allows you run Vite without any special configuration. However for the default Laravel template and standard notebooks, the guideline on how to setup Vite can be found here

RUNNING VITE IN STANDARD NOTEBOOKS

Vite has emerged as the preferred tool for fast bundling within the JavaScript community, and our support for Node.js enables you to run your Vite projects seamlessly on PHPSandbox. When running Vite in development mode, the server host behavior can be overridden by specifying the desired host name. To utilize Vite on PHPSandbox, you will need to update your vite.config.js file and set the server HMR (Hot Module Replacement) host to a URL that matches your notebook's preview URL, with a port suffix appended to the subdomain part of the URL. For instance, if your notebook's preview URL is sample.ciroue.com, the server host would be sample-5137.ciroue.com.

To simplify this process, we have conveniently exposed your notebook's domain and host as environmental variables within the notebook environment. You can easily leverage these variables in your configuration setup. Here is an example configuration:

import { defineConfig, loadEnv } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), "");
    return {
        server: {
            hmr: {
                protocol: "wss",
                host: `${env.SUBDOMAIN}-5173.${env.NOTEBOOK_HOST}`,
                clientPort: 443,
            },
        },
        plugins: [
            laravel({
                input: "resources/js/app.js",
                refresh: true,
            }),
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    },
                },
            }),
        ],
    };
});

By utilizing the provided environmental variables, you can effortlessly adapt your Vite configuration to work seamlessly with PHPSandbox Notebooks, ensuring smooth compatibility and optimal development experience.