Scribd
Upload
74 views

Installing Vite With Vue - Js and SSR On Ubuntu 22.04

Uploaded by

Mr. Steve
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
74 views

Installing Vite With Vue - Js and SSR On Ubuntu 22.04

Uploaded by

Mr. Steve
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Introduction

Vite is a modern build tool for web applications that offers lightning-fast
development and optimized builds. It supports various frameworks, including Vue.js,
React, and Svelte. One of the features of Vite is Server-Side Rendering (SSR),
which can improve the initial load time and SEO performance of your web
application.

Installing Vite with Vue.js and SSR on Ubuntu 22.04


To install Vite with Vue.js and SSR on Ubuntu 22.04, follow these steps:

Install Node.js and npm: Vite requires Node.js to run. You can install it from the
official Node.js repository:
Copy
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
Create a new Vue.js project with Vite: Use the Vite CLI to create a new Vue.js
project with SSR support:
Copy
npm create vite@latest my-vite-app --template vue-ts
cd my-vite-app
npm install
Install additional dependencies: For SSR in a Vue.js project, you need to install
some additional dependencies:
Copy
npm install @vue/server-renderer
Configure Vite for SSR: Modify the vite.config.js file to enable SSR by adding the
ssr option to the Vue plugin:
Copy
import vue from '@vitejs/plugin-vue'

export default {
plugins: [
vue({
ssr: true
})
]
}
Update entry point: Update the main.js file to handle SSR:
Copy
import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {


const app = createSSRApp(App)
return app
}
Create server entry point: Create a new file, e.g., server.js, to handle server-
side rendering:
Copy
const fs = require('fs')
const path = require('path')
const express = require('express')
const { createApp } = require('./main')

const app = express()


const port = process.env.PORT || 3000

app.use(require('serve-static')(path.resolve(__dirname, 'dist')))
app.get('*', async (req, res) => {
const appInstance = createApp()
const appHtml = await appInstance.renderToString()
const html = `
<!DOCTYPE html>
<html>
<head>
<title>My Vite SSR App</title>
<script type="module" src="/src/entry-client.js"></script>
</head>
<body>
<div id="app">${appHtml}</div>
</body>
</html>
`
res.send(html)
})

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`)
})
Update scripts: Update the package.json file to include a new script for running
the SSR server:
Copy
{
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "node server.js"
}
}
Run the application: Start the development server with SSR support:
Copy
npm run dev
And in a separate terminal, run the SSR server:

Copy
npm run serve
Now, you should be able to access your Vue.js application with Vite and SSR support
at http://localhost:3000.

You might also like