All Projects → pi0 → nuxt-plesk-example

pi0 / nuxt-plesk-example

Licence: other
No description or website provided.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to nuxt-plesk-example

Sails Nuxt
Sails + Nuxt + Vuetify Combo <3
Stars: ✭ 92 (+240.74%)
Mutual labels:  ssr, nuxt
Nuxt Env
Inject env vars for your Nuxt app at runtime
Stars: ✭ 169 (+525.93%)
Mutual labels:  ssr, nuxt
Naice Blog
😺 新的博客上线啦
Stars: ✭ 93 (+244.44%)
Mutual labels:  ssr, nuxt
Hapi Nuxt
Nuxt.js plugin for Hapi.js
Stars: ✭ 46 (+70.37%)
Mutual labels:  ssr, nuxt
Robots Module
NuxtJS module for robots.txt
Stars: ✭ 180 (+566.67%)
Mutual labels:  ssr, nuxt
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (+100%)
Mutual labels:  ssr, nuxt
Surmon.me
🆒 My personal website and blog, powered by @vuejs (3)
Stars: ✭ 1,767 (+6444.44%)
Mutual labels:  ssr, nuxt
Nuxt Static Render
Nuxt module for SSR without rehydration payload
Stars: ✭ 32 (+18.52%)
Mutual labels:  ssr, nuxt
my-blog
🐬 个人技术博客(基于vue的服务端渲染 nuxt.js)
Stars: ✭ 94 (+248.15%)
Mutual labels:  ssr, nuxt
Wp Nuxt
The module adds WP-API to your nuxt application.
Stars: ✭ 179 (+562.96%)
Mutual labels:  ssr, nuxt
Virapro.ru
[E-commerce] Plumbing Store
Stars: ✭ 45 (+66.67%)
Mutual labels:  ssr, nuxt
Nuxt Wordpress Pwa
Wordpress + Vue + Nuxt.js
Stars: ✭ 251 (+829.63%)
Mutual labels:  ssr, nuxt
Axios Module
Secure and easy axios integration with Nuxt.js
Stars: ✭ 998 (+3596.3%)
Mutual labels:  ssr, nuxt
Vue Masonry Wall
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
Stars: ✭ 79 (+192.59%)
Mutual labels:  ssr, nuxt
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (+44.44%)
Mutual labels:  ssr, nuxt
Auth Module
auth.nuxtjs.org
Stars: ✭ 1,624 (+5914.81%)
Mutual labels:  ssr, nuxt
Nuxt.js
The Intuitive Vue(2) Framework
Stars: ✭ 38,986 (+144292.59%)
Mutual labels:  ssr, nuxt
Laravel Nuxt
A Laravel-Nuxt starter kit.
Stars: ✭ 943 (+3392.59%)
Mutual labels:  ssr, nuxt
Google Optimize Module
SSR friendly Google Optimize module for Nuxt.js
Stars: ✭ 180 (+566.67%)
Mutual labels:  ssr, nuxt
Vue Gates
🔒 A Vue.js & Nuxt.js plugin that allows you to use roles and permissions in your components or DOM elements, also compatible as middleware and methods.
Stars: ✭ 184 (+581.48%)
Mutual labels:  ssr, nuxt

Nuxt on Plesk Onyx

You have to first download and set up a Plesk server. It is downloadable from this link. This guide is using the Docker-based method. If you prefer to or already have a Plesk server, you may have to take a look at here for Node extension installing instructions.

Setup plesk

Run Plesk server:

docker run -d -it -p 80:80 -p 443:443 -p 8880:8880 -p 8443:8443 -p 8447:8447 plesk/plesk

New head to http://localhost:8880 for admin panel.

Wait until server is setup.

image

Now you can log in with default conditionals admin/changeme.

image

Add a new domain

After logging in, switch to "Power User View" (Bottom left)

Click on "Add a Domain" to define a new domain:

In this tutorial, I use nuxt.127.0.0.1.xip.io as Plesk is running on my laptop.

If you have a version control, you may prefer to enable "Git support". For this demo I use a simple hello-world repository:

https://github.com/pi0/nuxt-plesk-example.git

Now from "Websites and Domains" tab, open "Node.js":

Enable and set Node params

Set this params:

Node.js Version: 8.9.3 (Or later) Document Root: /httpdocs/static Application Root: /httpdocs

Click on "Enable Node.js"

Click on "NPM Install"

image

Development

image

Click on restart app and head to http://nuxt.127.0.0.1.xip.io! Voila.

image

Production

Set params like below:

image

You should have a file called server.js in the root of your project like this:

const express = require('express');
const { Nuxt, Builder } = require('nuxt');

const config = require('./nuxt.config.js');

// Create new express app
const app = express();

// Listen to port 3000 or PORT env if provided
app.listen(process.env.PORT || 3000);

// Enable production mode
config.dev = false;

// Create instance of nuxt
const nuxt = new Nuxt(config);

// Add nuxt middleware
app.use(nuxt.render);

If you prefer to automatically build upen server start (Not recommanded), then appennd line(s) below:

new Builder(nuxt).build()

If you don't prefer to build upon start, use "Run Script" tool to manually trigger a build:

build --scripts-prepend-node-path

image

If you prefer to automatically build upon server start (Not recommended), then append line(s) below:

new Builder(nuxt).build().catch(err => {
  console.error(err);
  process.exit(1);
});

Windows / IISNode

Windows deployment is a little bit different by design with Plesk.

Go into "Websites & Domains" > "Hosting Settings" and ensure that "Document Root" is set to httpdocs (Or where you clone your project. Not the httpdocs/dist folder)

image

Go into Node.js settings and ensure that BOTH "Document Root" and "Application Root" are pointing to /httpdocs. They should be the same.

image

Using file manager's "Change Permissions" ensure that "Application pool group" has all permissions on /httpdocs directory. This is required for when we run build inside server.js.

image

Create a file called web.config inside /httpdocs:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="server">
          <match url="/*" />
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Plesk node windows support is not so great. Please check /logs/iisnode for logs.

More info about iisnode: https://github.com/Azure/iisnode

Nuxt.js

For detailed explanation on how Nuxt.js things work, checkout Nuxt.js docs.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].