Git Product home page Git Product logo

Comments (8)

taka1156 avatar taka1156 commented on June 19, 2024 2
import { defineConfig } from 'vite';
import { VitePluginNode } from 'vite-plugin-node';
import { resolve } from 'path';

export default defineConfig({
  root: 'src',
  server: {
    port: 3000,
  },
  build: {
    ssr: 'index.ts',
    outDir: '../api',
    emptyOutDir: true
  },
  plugins: [
    ...VitePluginNode({
      adapter: 'express',
      appPath: './src/index.ts',
      tsCompiler: 'esbuild',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});
{
...
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
...
}
yarn build or npm run build

https://github.com/vitejs/vite/blob/5396a706ca21b9943e1c94d87192eeb4f03d3df5/packages/playground/ssr-vue/package.json#L10

https://github.com/taka1156/vite-express-sample

from vite-plugin-node.

axe-me avatar axe-me commented on June 19, 2024 2

I just released 0.0.17 to npm, please check it out.

Thanks @taka1156 for providing this solution. I added this ssr config to the plugin default, the plugin will just use the appPath as entry to build/bundle the app.

simply add a build script to your package.json, it should just work!

from vite-plugin-node.

taka1156 avatar taka1156 commented on June 19, 2024 1

@radiorz

import { defineConfig } from 'vite';
import { VitePluginNode } from 'vite-plugin-node';
import { resolve } from 'path';

export default defineConfig({
  root: 'src',
  server: {
    port: 3000,
  },
  build: {
    ssr: true,
    outDir: '../api',
    emptyOutDir: true
  },
  plugins: [
    ...VitePluginNode({
      adapter: 'express',
      appPath: process.env.NODE_ENV ==='production' ? 'index.ts' : 'src/index.ts',
      tsCompiler: 'esbuild',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

https://github.com/taka1156/vite-express-sample/tree/update-vite-plugin-node

from vite-plugin-node.

saiqulhaq avatar saiqulhaq commented on June 19, 2024 1

I think we need to update the README
there is a statement on TODO section that this tool doesn't have build command for docker

from vite-plugin-node.

radiorz avatar radiorz commented on June 19, 2024

if possible, I wish the vite could build nodejs to one file like webpack do.
here is an example with webpack4:

'use strict';

const path = require('path');
let externals = _externals();

module.exports = {
  mode: 'production',
  entry: {
    app: './index.js'
  },
  target: 'node',
  output: {
    path: path.resolve('./build'),
    filename: '[name].cjs'
  },
  resolve: {
    extensions: ['.js']
  },
  externals: externals,
  node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true
  },
  module: {},
  plugins: []
};

function _externals() {
  let manifest = require('./package.json');
  let dependencies = manifest.dependencies;
  let externals = {};
  for (let p in dependencies) {
    externals[p] = 'commonjs ' + p;
  }
  return externals;
}

from vite-plugin-node.

radiorz avatar radiorz commented on June 19, 2024

@axe-me [bug]
when I dont put the build/ssr option, the plugin will pass appPath to build/ssr.
but when there is a root option in vite,it will be a mistake:
image

from vite-plugin-node.

radiorz avatar radiorz commented on June 19, 2024

@radiorz

import { defineConfig } from 'vite';
import { VitePluginNode } from 'vite-plugin-node';
import { resolve } from 'path';

export default defineConfig({
  root: 'src',
  server: {
    port: 3000,
  },
  build: {
    ssr: true,
    outDir: '../api',
    emptyOutDir: true
  },
  plugins: [
    ...VitePluginNode({
      adapter: 'express',
      appPath: process.env.NODE_ENV ==='production' ? 'index.ts' : 'src/index.ts',
      tsCompiler: 'esbuild',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

https://github.com/taka1156/vite-express-sample/tree/update-vite-plugin-node

thanks, this is a way to solve my problem.

from vite-plugin-node.

taka1156 avatar taka1156 commented on June 19, 2024
import { Plugin, UserConfig, ConfigEnv } from 'vite';
import { PLUGIN_NAME, ViteConfig, VitePluginNodeConfig } from '.';
import { RollupPluginSwc } from './rollup-plugin-swc';
import { createMiddleware } from './server';

export function VitePluginNode(cfg: VitePluginNodeConfig): Plugin[] {
  const config: VitePluginNodeConfig = {
    appPath: cfg.appPath,
    adapter: cfg.adapter,
    tsCompiler: cfg.tsCompiler ?? 'esbuild',
    exportName: cfg.exportName ?? 'viteNodeApp'
  };

  const resolvePath = (root: string = '', config: VitePluginNodeConfig): VitePluginNodeConfig => {
    if (root !== '') {
      config.appPath = `${root}/${config.appPath}`;
    }
    return config;
  };

  const resolveConfig = (viteConfig: UserConfig, env: ConfigEnv ): ViteConfig => {

    const { root, build } = viteConfig;
    const { appPath } = config;

    if (env.mode === 'serve') {
      // serve
      return {
        // https://vitejs.dev/config/#root
        root: root || process.cwd(),
        server: {
          hmr: false
        },
        esbuild: config.tsCompiler === 'esbuild' ? {} : false,
        VitePluginNodeConfig: resolvePath(root, config),
      };
    } else {
      // build
      return {
        // https://vitejs.dev/config/#root
        root: root || process.cwd(),
        build: {
          ssr: appPath || 'index.js', // production entry point
          outDir: build?.outDir || '../dist',
          emptyOutDir: build?.emptyOutDir|| true,
        },
        esbuild: config.tsCompiler === 'esbuild' ? {} : false,
        VitePluginNodeConfig: resolvePath(root, config)
      };
    }
  };

  const plugins: Plugin[] = [
    {
      name: PLUGIN_NAME,
      config: (viteConfig, env) => resolveConfig(viteConfig, env),
      configureServer: (server) => {
        server.middlewares.use(createMiddleware(server));
      },
      apply: 'serve'
    },
    {
      name: PLUGIN_NAME,
      config: (viteConfig, env) => resolveConfig(viteConfig, env),
      apply: 'build'
    }
  ];

  if (config.tsCompiler === 'swc') {
    plugins.push({
      ...RollupPluginSwc({
        jsc: {
          target: 'es2019',
          parser: {
            syntax: 'typescript',
            decorators: true
          },
          transform: {
            legacyDecorator: true,
            decoratorMetadata: true
          }
        }
      })
    });
  }

  return plugins;
}

@axe-me
https://vitejs.dev/guide/api-plugin.html#vite-specific-hooks

from vite-plugin-node.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.