chrisvfritz / prerender-spa-plugin Goto Github PK
View Code? Open in Web Editor NEWPrerenders static HTML in a single-page application.
License: MIT License
Prerenders static HTML in a single-page application.
License: MIT License
¡Hi!
¡Thank you for making this lib!
I would like to know if an example with vue could be possible :)
Thank you for making this lib!
I want to pre render my demo,
but I met this mistake
Error: [vuex] vuex requires a Promise polyfill in this browser.
http://localhost:8001/static/js/vendor.1f0ebf94d7095e1fc159.js:6 in c
http://localhost:8001/static/js/vendor.1f0ebf94d7095e1fc159.js:6 in x
http://localhost:8001/static/js/app.8fe79568cb21368e0285.js:1
http://localhost:8001/static/js/manifest.aa0953c85f5371b58749.js:1 in t
http://localhost:8001/static/js/app.8fe79568cb21368e0285.js:1
http://localhost:8001/static/js/manifest.aa0953c85f5371b58749.js:1 in t
http://localhost:8001/static/js/manifest.aa0953c85f5371b58749.js:1 in webpackJsonp
<html><head><meta charset="utf-8"><title>vue2.0-demo</title><link rel="stylesheet" href="//cdn.bootcss.com/normalize/4.2.0/normalize.min.css"><link href="/static/css/app.91a36ac2a7102550c63c5ac844029744.css" rel="stylesheet"></head><body><div id="app"></div><script type="text/javascript" src="/static/js/manifest.aa0953c85f5371b58749.js"></script><script type="text/javascript" src="/static/js/vendor.1f0ebf94d7095e1fc159.js"></script><script type="text/javascript" src="/static/js/app.8fe79568cb21368e0285.js"></script></body></html>
Hope to get your help
I'm using prerender-spa-plugin on a page which contains inputs. These inputs are two way data-binded to component data (using v-model).
When I am on a slow connection, the DOM is created from the prerendered HTML, and (I think) override by the app. My problem is when I prerender inputs, the user can start typing and when the app loads (some seconds later on slow connection), the input clears because it is data-binded to the data with an empty string as the default value.
Is there a workaround to NOT override the user input and to use it as a default value when the app loads or something ?
Then root component content:
<template>
<div id="app">
<router-view class="view" ></router-view>
</div>
</template>
dist :
<div id="app"><router-view class="view"></router-view></div>
the plugin is can't compile router??
Trying to use prerender-spa-plugin, but getting this on all generated views:
<html><head></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">{"statusCode":404,"error":"Not Found"}</pre></body></html>
I use vue 2.x and vue-router 2.x.
Here's my config:
plugins: [
new PrerenderSpaPlugin(
path.join(__dirname, '/static'),
[ '/fr/', '/en/', '/fr/contact/', '/en/contact/', '/test' ]
)
]
Here's my root Vue instance:
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<!-- Route Outlet -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
What would be a possible solution to this issue?
In the README.md, you state:
Vue 2.x: Make sure the root component has the same id as the element it's replacing
I'm not really sure to understand what that means (I'm also a Vue beginner). In fact, preprendering works, but then, if the client has JavaScript enabled, the Vue application does not take control of the DOM (no errors, just the frozen page).
Unfortunately, https://github.com/chrisvfritz/prerender-spa-plugin-vue-demo is for Vue 1.x.
My application bootstrap looks like this (relevant parts only):
<body>
<div id="vue-app"></div>
</body>
const Layout = require('./ui/layout/layout.vue');
const root = new Vue({
render: h => h(Layout)
});
document.addEventListener('DOMContentLoaded', () => root.$mount('#vue-app'));
I know it's not correct here, but I've tried various little variations without success.
Anyway, thanks for your work, prerendering is awesome, especially when it's so simple to add!
I'm not sure who's the guilty one :), but here's the thing. I created a fresh vue
application using the vue-cli (vue init webpack {projectname}). Then I installed the vue-router and finally the [vue-apollo] package with [apollo-client].
Everything seams to be working, but when I try to prerender my project using the prerender-spa-plugin I see errors inside compiled files. At first I thought that pre-renderer has problems with async
operations, but it turned out that it works without problems. Only the apollo
part is not working.
This is the error that I see:
TypeError: undefined is not an object (evaluating 'r._updateFromParent')
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:12 in st
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13 in y
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13 in v
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13 in y
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:12 in _update
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:12
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13 in get
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13 in run
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:12 in T
http://localhost:8000/static/js/vendor.0c3c80024a3bb7c58eec.js:13 in t
Here is also a repository with my code. Just run npm run build
, then check the ./dist/index.html
file.
Also published here: vuejs/apollo#8
Project: https://github.com/kushagharahi/kushagharahi.github.io I am using vuejs2.0
I can not get the actual content of the page prerendered. All I get outputted is the original index.html w/o rendered content.
I've been scratching my head at what is wrong.
My entry point is ./src/scripts/main.js
You can see the issue in the ./dist
folder. Every path's index.html is identical to ./dist/index.html
. IE: ./dist/index.html
is the same as ./dist/contact/index.html
which is equivalent of ./src/static/index.html
(the original file).
I would like to be able to have routes that end in .html so that the pre-rendered version can be a physical file. However, if I specify a route with a .html extension it puts the prerendered output in a folder with that name, in a file named index.html. Is there any way to have it just output the file directly without putting it in its own folder?
Hi there.
I'm using vue.js for a wordpress theme and I'm trying to get this pre-render plugin to work.
I've followed the instructions for set up and the plugin is creating the static files the content of the files is as follows:
{"statusCode":404,"error":"Not Found"}
If i set the path of the to the theme directory or the worpdress root I still get the same response.
Can anyone help at all?
I'm using webpack template and config prerender-spa-plugin
plugin for webpack.prod.conf.js like this:
new PrerenderSpaPlugin(
// Path to compiled app
path.join(__dirname, '../dist'),
// List of endpoints you wish to prerender
[ '/', '/discuss' ]
)
Make more details:
// Discuss.vue
export default {
data () {
return {
showExplore: false
}
}
}
<div class="explore" v-if="showExplore"><p>I need your help.</p></div>
and html for handle event like this:
<button @click="showExplore =! showExplore" class="btn btn-default">Explore</button>
but, when I click on the button "Explore", class explore
still not working.
I look forward to hearing from you soon. Thanks!
My VueJS app has a good number of routes, 143 currently, I am trying to prerender but this is overloading my system.
http://puu.sh/uXwnd/f4eb99e29d.png
Am I missing the option that renders 1 pages at a time?
If I render about 5 pages it runs into no issues and completes really fast it is only when I attempt to render all of my pages that it starts spawning PhantomJS over and over and then each on hangs and never completes.
I've posted this question on Stackoverflow too, really hoping to get some help.
I'm trying to configure prerender-spa-plugin
to work with my vue.js (1.x) application. When I build an application without it - everything works perfectly, but I need to get pages pre rendered foe SEO purposes.
When I install the plugin, it does prerender, but then it shows me some router error ([vue-router] Uncought error during transition
) and also TypeError: undefined is not an object (evaluating 's(e).isEqualNode')
.
Again - none of this errors happen if I build the app for production without pretender-spa-plugin
.
Some info about the tools:
- Mac OS
- node v6.10.1
- quasar --version 0.5.2 (project runs using quasar framework)
- npm -v3.10.10
- vue.js (1.x)
Then, relevant settings are:
module.exports = {
plugins: [
new PrerenderSpaPlugin(
// Absolute path to compiled SPA
path.join(__dirname, '../dist'),
// List of routes to prerender
[ '/', '/apps'],
{
captureAfterDocumentEvent: 'custom-post-render-event',
captureAfterTime: 2000,
ignoreJSErrors: false,
captureAfterElementExists: '.main',
}
)
]
div .main
actually exists within every component which I need to prerender. But even without this trigger - the problem is still the same.
document.addEventListener('DOMContentLoaded', function () {
Quasar.start(() => {
Router.start(App, '#quasar-app')
})
document.dispatchEvent(new Event('custom-post-render-event'))
})
module.exports = {
replace: false,
....
Not to use some of these triggers, which I've written here foe webpack. I guess I've already tried all possible combinations - sometimes build process just hangs up, sometimes - it is compiled with the same problem.
I tried to set this custom even in my initial app.vue file, and attach it to ready ()
- the same result
I tried to specify replace: false
to all inner components too - and again, the same result - it just always gives me the router error, and then shows index page rendered on every route (together with content which should be there)
The only thing which 'helped' - is not to specify /
route for the plugin. Then, My index component is not pre rendered, and all others work in a good order. But obviously I'll need to have it pre rendered too.
Any help or suggestions highly welcomed! Maybe, I'm missing something quasar framework
specific?
I'm also using html-webpack-plugin
, can it be because of it?
Thanks!
In my project need different title,keywords, so i using multi HtmlWebpackPlugin.
but I found the html's title not work well.
webpackConfig.plugins.push(new HtmlWebpackPlugin({
filename: '../dist/promotion/sharetest/index.html',
template: 'index.html',
title:'newCostomTitle',
description:'newCostomDescription',
keywords:'newCostomKeywords',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
)
newCostomTitle
how can i fix it?
Thank you.
<html><head></head><body><pre
style="word-wrap: break-word; white-space: pre-wrap;">{"statusCode":404,"error":"Not Found"}
If the ajax asynchronous data loading, whether into the static HTML, how to use?
In vue:
setTimeout(function() {
//return some date into dom
}, 2000);
compilation is complete, the content will be generated in the static html.
when npm run build ,the setTimeout is OK, but ajax return is not generated in the static html.
when npm run dev, the ajax is OK.
I think whe the compile, ajax url is not correct request in prerender-spa-plugin.
who can give me some help?
It took me a little while to figure out why my build would hold up for over 30 minutes (I never got it to finish). I had <style scoped> in one of my components. I removed scoped and the build worked like before. Can you give me any insight into what was the nature of this hold up?
my dist menu is like:
-/dist/
-/home/
-index.html
home.js
in index.html i ref my js like this:<script type="text/javascript" src="../home.js?92cef4b844ea95bf9e80"></script>
the prerender didn't work.It seems that the js didn't executed by the plugin.However everything is ok if just open the html in localhost
after build nothing in <div id="app"></div>
I have a vue 1.x application that is using prerender-spa-plugin
. When generating the index.html
files for each route on build, webpack
will sometimes inject <script src="/static/js/0.[hash].js" async=""></script>
into the <head></head>
.
This is normal and expected, as webpack optimizes for loading additional chunks on-demand.
A problem surfaces when visiting the endpoint, because the browser tries tries to evaluate the script 0.[hash].js
before manifest.js
or vendor.js
chunks, and reliably causes an exception:
Uncaught ReferenceError: webpackJsonp is not defined.
Is there a flag or option to temporarily prevent webpack
from injecting on-demand chunks? Or must we get hacky and scrub the <script />
tags from prerendered indexes? I cannot naively set the captureAfterTime: 0
, as I rely on other aspects of the page asynchronously rendering.
I've just setup a clean Vue 2 project with vue init
, and added prerender-spa-plugin
to my production webpack config like so:
new PrerenderSpaPlugin(
// Absolute path to compiled SPA
baseWebpackConfig.output.path,
// List of routes to prerender
[ '/' ]
),
And running $ npm run build
successfully build the Vue app, CSS & JS and indeed pre-renders the homepage. Excellent!
So next I added vue-router
, added a page & a route for /about
, and added that to my list of routes to prerender. $ npm run build
and dist/about/index.html
was created. Excellent!
What I don't understand is what file I should point users to when I want to client-side render? For instance, I could pre-render the homepage and the about page, but if someone visits /login
and I want to client-side render the login page, which page in my dist/
folder should I fallback to?
For reference, my dist/
folder looks like:
dist/
about/index.html
static/...
index.html
I feel like I'm missing a page.html
that would be the non prerendered SPA HTML file that would be served for "all other routes"?
Thanks,
i have a directory after build without prerender-spa-plugin,like this:
-/dist/
-/css/
-home.css
-contact.css
-/js/
-home.js
-contact.js
-/static/
-xxx.png
-home.html
-contact.html
i found that prerender-spa-plugin will auto search a file named 'index.html' in the directoy specified in config, but i wanna render multi pages in the same directory like home.html , contact.html in this case.
Need Help ,THX
Hi,
For some reasons I need to inline a background-image css property and I'm giving it a URL, for example:
<div style="background-image: url('/static/some-image.jpg'); width: 300px; height: 200px;"></div>
The problem is that phantomJS replaces my URL by:
<div data-v-b31ef546="" style="background-image: url(http://localhost:8000/static/some-image.jpg); width: 300px; height: 200px;"></div>
Because it's running on localhost:8000 but obviously it doesn't work when I'm serving the static file in a web server. Any better workaround than using a regexp to replace it in postProcessHtml
?
Thanks
Please, update phantomjs-prebuilt
dependency to 2.1.8 or higher
It seems using require statements (e.g. const mod = require('module');
instead of imports (e.g. import mod from 'module'
) anywhere in the code prevents any prerendering from occuring.
However, the code still works properly in the browser.
I certainly need to investigate that more and will follow up with a more precise example if there is interest. Meanwhile I'm curious if any of you can confirm / explain this behaviour.
Hi!
I met a question about 'Bad argument',and I can't solve
I used the solution to this problem
But the problem seems to be more than that
The mistake is still there
I hope I can get your help
macOS 10.12.3 (16D32)
node -v v7.7.3
npm -v 4.1.2
[email protected]
[email protected]
Hi,
I get this error when i try to run npm run build from a Vue project
C:\Users\xxx\Desktop\Renka\page\node_modules\prerender-spa-plugin\lib\compile-to-html.js:80
if (stderr) throw stderr
^
SetProcessDpiAwareness failed: "COM error 0x80070005 (Unknown error 0x0ffffffff80070005)"
//In my Productions config
new PrerenderSpaPlugin(
Path.join(__dirname, '../dist'),
[ '/' ]
)
i use:
"prerender-spa-plugin": "^1.1.0",
Windows 10
Hi,
Is it possible to get your plugin working with small parts of dynamic content still? For example, our homepage is fully static with the exception of the navigation menu, where depending on whether the user is logged in or not, it alters the menu. If the user is not logged in it will show 'Sign Up' and 'Register' links whereas if the user is logged in, it will show a 'Dashboard' link. Is this possible with your plugin? Also, for multilingual sites, how can we get it to pre-render for each page in each language? For example our site papayapods.com is in English and fr.papayapods.com is in French, the language is set at load time depending if there is a language subdomain used (or not for English).
Many thanks
I am just wondering if there is a way in order to maintain the transition effect between the routes when using preload?
After tons of trying and 404 errors, I just realized that my build process itself may caused the problem.
I'm using webpack-stream
with gulp
to run webpack, instead of using cli commands.
Which means, webpack is not working on filesystem directly, but in gulp's memory. Then gulp will write the outputs into somewhere after webpack is done. I guess currently prerender-spa-plugin may not be able to read those output files during building process...
Is it possible to to have dynamic routes/links like:
[ '/', '/contact', '/exercises/:exercise' ],
So that is prerenders all pages in under exercises?
Hi,
I first want to thank you for this plugin that is, to me, much more than a simple plugin, but a revolution. It's kind of the death of static site generators and the convergency of Apps and Pages on the web.
I begin to play with this and it seems that the statically rendered components are completly rerendered while loading the page and pass, among others, in the "mounted" state (without "destroying" the previous one).
So is it possible to consider the component has already been rendered, and therefore just pass through the "updated" state when needed? Is it a to do, or a technical limitation?
Thanks a lot for your answer.
test on Mac
node v6.2.0
npm v3.8.9
internal/child_process.js:278
var err = this._handle.spawn(options);
^
TypeError: Bad argument
at TypeError (native)
at ChildProcess.spawn (internal/child_process.js:278:26)
at exports.spawn (child_process.js:372:9)
at Object.exports.execFile (child_process.js:139:15)
at capturePage (/app/www/prerender-spa-plugin/examples/generic-simple/node_modules/prerender-spa-plugin/lib/compile-to-html.js:70:26)
at /app/www/prerender-spa-plugin/examples/generic-simple/node_modules/prerender-spa-plugin/lib/compile-to-html.js:89:11
at _invoke (/app/www/prerender-spa-plugin/examples/generic-simple/node_modules/hapi/lib/server.js:305:20)
at internals.Server._invoke (/app/www/prerender-spa-plugin/examples/generic-simple/node_modules/hapi/lib/server.js:375:16)
at Items.serial (/app/www/prerender-spa-plugin/examples/generic-simple/node_modules/hapi/lib/server.js:297:14)
at done (/app/www/prerender-spa-plugin/examples/generic-simple/node_modules/hapMacBook-Pro-2:gen
Source code: https://github.com/Shyam-Chen/SPA-SEO-Test
https://spa-seo-test.firebaseapp.com/
https://spa-seo-test.firebaseapp.com/about <- Website not working
Hey,
is there a solution for i18n routes?
Example:
/en/about
/de/über
I am worried about the fact that we have to name the files with special characters ...
Hi,
I'm using this plugin to prerender some pages of a vue project (built with that template) with the following settings :
new PrerenderSpaPlugin(
config.build.assetsRoot, // = "./dist"
[ '/home', '/about', '/contact' ],
{
captureAfterTime: 5000,
maxAttempts: 10,
phantomOptions: '--disk-cache=true',
phantomPageSettings: { loadImages: true }
}
)
It creates the following files :
dist
|-- static/
| |-- css/ ..
| +-- img/ ..
|-- about/index.html
+-- index.html
The issue is that ./dist/index.html requires files from ./dist/static/ and ./dist/about/index.html from ./dist/about/static/ which don't exist. Is there a way to have it requires from the root instead ?
var err = this._handle.spawn(options);
^
TypeError: Bad argument
at TypeError (native)
at ChildProcess.spawn (internal/child_process.js:289:26)
at exports.spawn (child_process.js:380:9)
at Object.exports.execFile (child_process.js:143:15)
at capturePage (/Users/yifengwu/Desktop/dev/lava-official/node_modules/prerender-spa-plugin/lib/compile-to-html.js:70:26)
at /Users/yifengwu/Desktop/dev/lava-official/node_modules/prerender-spa-plugin/lib/compile-to-html.js:88:11
at _invoke (/Users/yifengwu/Desktop/dev/lava-official/node_modules/hapi/lib/server.js:305:20)
at internals.Server._invoke (/Users/yifengwu/Desktop/dev/lava-official/node_modules/hapi/lib/server.js:375:16)
at Items.serial (/Users/yifengwu/Desktop/dev/lava-official/node_modules/hapi/lib/server.js:297:14)
at done (/Users/yifengwu/Desktop/dev/lava-official/node_modules/hapi/node_modules/items/lib/index.js:31:25)
at Server.finalize (/Users/yifengwu/Desktop/dev/lava-official/node_modules/hapi/lib/connection.js:171:9)
at Server.g (events.js:291:16)
at emitNone (events.js:91:20)
at Server.emit (events.js:185:7)
at emitListeningNT (net.js:1278:10)
at _combinedTickCallback (internal/process/next_tick.js:71:11)
I'm using this plugin with vue-cli webpack template.
And here is the code I added in webpack.prod.conf.js:
new PrerenderSpaPlugin(
path.join(__dirname, '../dist'),
['/']
)
The first argument is the root of the built files which has the following file structure:
/dist
|--- index.html
|--- /static
|--- /js
|--- /css
|--- /img
Also I came across the same error in the example you provide.
I tried in Node v6.7.0 & v4.6.0
Getting this error when trying to build my app. Not exactly sure how I can start to debug this, the app works well in a browser and I've tried "turning off" various third party dependencies like Intercom and Raven but to no avail. Is there a way to get a stacktrace to figure out what's causing the problem?
⠋ building for production...(node:25840) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
⠇ building for production...
Starting to optimize CSS...
Processing static/css/app.ea844220eb9d3e1f2353b0414c749fa0.css...
Processed static/css/app.ea844220eb9d3e1f2353b0414c749fa0.css, before: 163707, after: 163347, ratio: 99.78%
⠙ building for production...
/home/jbush/code/card-rocket-web/node_modules/prerender-spa-plugin/lib/compile-to-html.js:80
if (error) throw stdout
^
WARNING: JavaScript error while prerendering: /modern-masters-2017-box-promotion
TypeError: undefined is not an object (evaluating 'e[n].call')
phantomjs://code/phantom-page-render.js:26 in onError
From examples/generic-simple
:
input:
<!DOCTYPE html>
<html>
<head>
<title>Generic & Simple Prerendering Demo</title>
</head>
<body>
<input id="new-todo" placeholder="New todo">
<div id="todos"></div>
<script src="main.js"></script>
</body>
</html>
output:
<html><head>
<title>Generic & Simple Prerendering Demo</title>
</head>
<body>
<input id="new-todo" placeholder="New todo">
<div id="todos"><ul><li class="item">Do the dishes <button class="remove-todo" data-index="0">X</button></li><li class="item">Make the bed <button class="remove-todo" data-index="1">X</button></li><li class="item">Take out the trash <button class="remove-todo" data-index="2">X</button></li></ul></div>
<script src="main.js"></script>
</body></html>
Note that the <!DOCTYPE html>
is stripped out.
It is important that the doctype is preserved, as it affects page rendering.
This is happening when I add the javascript needed to Ajax submit a form. Below is my ContactForm component code that I am calling in my Contact Page Component.
If I remove the javascript at the top (before export default) the website will build. If I keep the code, I get a silent fail build loop. This has happened in my other page components where I want to add javascript just to one page. Am I doing something wrong? The form works properly on dev server and submits via ajax, I just can't build the site...
This is the error I get in terminal:
- building for production... C:\Users\orion\Desktop\blog.tatthien.com\blog.tatthien.com\node_modules\prerender-spa-plugin\lib\compile-to-html.js:80 if (error) throw stdout ^ WARNING: JavaScript error while prerendering: /resume TypeError: null is not an object (evaluating 't.addEventListener')
I don't even have a t.addEventlister. The code is probably document.addEventListener('DOMContentLoaded', loaded, false)
ContactForm.Vue
function validEmail (email) { // see:
var re = /^([\w-]+(?:.[\w-]+))@((?:[\w-]+.)\w[\w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i
return re.test(email)
}
// get all data in form and return object
function getFormData () {
var elements = document.getElementById('gform').elements // all form elements
var fields = Object.keys(elements).map(function (k) {
if (elements[k].name !== undefined) {
return elements[k].name
// special case for Edge's html collection
} else if (elements[k].length > 0) {
return elements[k].item(0).name
}
}).filter(function (item, pos, self) {
return self.indexOf(item) === pos && item
})
var data = {}
fields.forEach(function (k) {
data[k] = elements[k].value
if (elements[k].type === 'checkbox') {
data[k] = elements[k].checked
// special case for Edge's html collection
} else if (elements[k].length) {
for (var i = 0; i < elements[k].length; i++) {
if (elements[k].item(i).checked) {
data[k] = elements[k].item(i).value
}
}
}
})
console.log(data)
return data
}
function handleFormSubmit (event) { // handles form submit withtout any jquery
event.preventDefault() // we are submitting via xhr below
var data = getFormData() // get the values submitted in the form
if (!validEmail(data.email)) { // if email is not valid show error
document.getElementById('email-invalid').style.display = 'block'
return false
} else {
var url = event.target.action
/* eslint-disable no-undef */
var xhr = new XMLHttpRequest()
/* eslint-enable no-undef */
xhr.open('POST', url)
// xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.onreadystatechange = function () {
console.log(xhr.status, xhr.statusText)
console.log(xhr.responseText)
document.getElementById('gform').style.display = 'none' // hide form
document.getElementById('thankyou_message').style.display = 'block'
return
}
// url encode form data for sending as post data
var encoded = Object.keys(data).map(function (k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')
xhr.send(encoded)
}
}
function loaded () {
console.log('contact form submission handler loaded successfully')
// bind to the submit event of our form
var form = document.getElementById('gform')
form.addEventListener('submit', handleFormSubmit, false)
}
document.addEventListener('DOMContentLoaded', loaded, false)
export default {
`}
This plugin is supposed to be used for SPA, but is there any way to use this plugin for multiple pages which should be prerendered?
It would be great if I could do this below:
module.exports = {
// ...
plugins: [
new PrerenderSpaPlugin(
path.join(__dirname, '../dist'),
// Specify static file path instead of routes
[ '/index.asp', '/path/to/another.html', '/path/to/yet/another.php' ]
)
]
}
How do you like this?
I'm working with react. I want to prerender only the app shell and some other components. Is there any way I can do that with his plugin ?
Problem
When my browser is loading for the first time the website, the static HTML pages are shown until the "real" vuejs content appears. This breaks the smoothness of the page, which is very important for this particular project. You can see an example here: http://draft.witify.io/fr/projects/
Question
Is there a way to "hide" the static content for all vuejs compatible browsers and directly show the vuejs content?
Possible solutions?
Can route can be on an already hosted website ? For example if I want to use prerender-spa-plugin on another project (not even webpack for instance). Something like CasperJS you give an absolute URL.
new PrerenderSpaPlugin(
Path.join(__dirname, 'dist'),
[ 'http://my-project.local/home.php' ]
)
I have the following error
Error: Invalid path: http://my-project.local/home.php
Hello,
Didn't want to create an issue for this, since it's most likely problem with my configuration. Maybe I misunderstood the "caveats" section. But after not being able to solve this for several hours, I decided to ask.
Using plain simple javascript inside my webpack entry (just for testing purposes), everything works fine.
Problem is when I try to use my Vue app. Nothing actually renders to the index.html (just 2 blank lines). If I open this index.html in browser, it works without any issues (Vue app renders properly).
main.js (webpack entry point):
App.vue (only the template part):
Webpack config (showing only the relevant part).
I'm not using any client side routing nor webpack code splitting.
Anyone able to help?
Even more in-depth explanation of the caveats section would be nice.
Thanks a lot!
Hi Chris!
Thanks for the plugin and the demos!
I’ve got the build running properly, and the static pages are rendered, but no JS seems to be loading. I have a few @clicks
and @submits
that aren’t firing when clicked. Is there another step when you have some JS that allows the user to interact with the page?
in main.js
/* eslint-disable no-new */
let root = new Vue({
router,
store,
render: h => h(App)
})
document.addEventListener('DOMContentLoaded', function () {
root.$mount('#app')
})
the other configs are set up like the example in the Vue Spa repo.
MBP:crewguru-web-ng2 gordon$ npm run build
> [email protected] build /Users/gordon/workspace/CrewGuru/crewguru-web-ng2
> webpack
10% building modules 3/3 modules 0 active(node:39231) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
95% emitting
/Users/gordon/workspace/CrewGuru/crewguru-web-ng2/node_modules/prerender-spa-plugin/lib/compile-to-html.js:80
if (error) throw stdout
^
WARNING: JavaScript error while prerendering: /home
TypeError: undefined is not an object (evaluating 'link.import.querySelector')
phantomjs://code/phantom-page-render.js:26 in onError
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.