ream / deprecated Goto Github PK
View Code? Open in Web Editor NEWπ Framework for building universal web app and static website in Vue.js (beta)
Home Page: https://ream.js.org
License: MIT License
π Framework for building universal web app and static website in Vue.js (beta)
Home Page: https://ream.js.org
License: MIT License
When building there is the following error:
ERROR in client.264ba4e2.js from UglifyJs
Unexpected token punc Β«}Β», expected punc Β«:Β» [./src/index.js:20,15][client.264ba4e2.js:7142,66]
To reproduce just clone this project: https://github.com/jazoom/ream-minimal
then run:
$ yarn
$ npm run build
const unvue = require('unvue')
const Koa = require('koa')
const Router = require('koa-router')
const handle = unvue.getRequestHandler()
const app = new Koa()
const router = new Router()
router.get('*', ctx => {
handle(ctx.req, ctx.res)
})
module.js:472
throw err;
^
Error: Cannot find module 'fs-promise'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/Users/evilemon/work/ream/lib/index.js:4:12)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
I encounter this problem in many examples,i wonder which verion of npm or node?
import Vue from 'vue'
import Vuex from 'vuex'
import Router from 'vue-router'
import axios from 'axios'
Vue.use(Router)
Vue.use(Vuex)
// The createRouter function should return a route instance
const createRouter = () => new Router({
base: '/hello/',
mode: 'history', // required
routes: [{
path: '/',
component: () => import('./Home.vue')
// OR
// component: resolve => require(['./Home.vue'], resolve)
}]
})
const createStore = () => new Vuex.Store({
state: {
name: 'derp'
}
})
export default { createRouter, createStore }
given this simple app, visiting localhost:3000
redirects to localhost:3000/hello/
, and recurrent hot-code pushes redirect to localhost:3000/hello/hello/....
and so forth ... This ONLY happens when createStore
is exported. If app doesn't have a store, this behavior does not occur.
Branch | Build failing π¨ |
---|---|
Dependency | vue |
Current Version | 2.2.4 |
Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
As vue is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you itβs very likely also breaking them.
I recommend you give this issue a very high priority. Iβm sure you can resolve this πͺ
updated
hook not triggering update (@Kingwl via #5233)Vue.set
crashing when used on Arrays with non-number key (@pkaminski via #5216)v-show
not setting inline display property in SSR (@defcc via #5224)inject
option not reactive (@Kingwl via #5229)input[type=password]
behavior in IE9 (@ktsn via #5253)The new version differs by 19 commits .
c0ad75b
[release] 2.2.5
b876395
[build] 2.2.5
bfeb28f
pin todomvc css version
3b7cfc7
coverage
f4630d0
treat with different types as different nodes (fix #5266)
5222f06
bump deps
6de1b9b
optimize patch conditionals
0bb529a
also warn when listening to camelCase events in in-DOM templates
e47b1e5
Allow named properties on reactive arrays. (#5216)
70db229
handle v-model on password input field on ie9 (fix #5250) (#5253)
23a058e
fix(inject): change warn message when trying to mutate an injected value (#5243)
7dea9f1
fix provide isn't reactive with a single array (#5229)
4c4a2ab
trigger event after reassigned state - Fix #5191 (#5233)
e733e5c
fix SSR v-show render. (#5224)
84856a3
update issue template
There are 19 commits in total. See the full diff.
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
I wanted to use socket.io for real time but couldn't do it. here is what I did in create-app.js
file...
import socketio from "socket.io-client"
import VueSocketIO from "vue-socket.io"
const SocketInstance = socketio("http://localhost:4000");
Vue.use(VueSocketIO, socketio("http://localhost:4000"));
but when i open localhost:4000 the console starts showing > Whole request: ...ms
with infinite loop.
please help...
Similar to webpack, we can check if config file is valid before starting.
{
generate: {
routes: [':static:']
}
}
Use :static:
keyword so that Ream will add all routes specified in vue-router for you to generate static pages, this is useful when your routes do not contain patterns like :id
or regexp.
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Vuex from 'vuex'
//import modules from './vuex/modules'
Vue.use(Router)
Vue.use(Vuex)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
component: Home
}
]
})
const store = new Vuex.Store({
})
export default {router,store}
Error on Server:
:\wpresttheme\node_modules\vue-meta\lib\vue-meta.js:824
var htmlTag = document.getElementsByTagName('html')[0];
^
ReferenceError: document is not defined
at updateClientMetaInfo (C:\wpresttheme\node_modules\vue-meta\lib\vue-meta.js:824:56)
at Vue$2.refresh (C:\wpresttheme\node_modules\vue-meta\lib\vue-meta.js:885:35)
"version": "1.0.0-beta.9",
it works the first time but when i press f5 then i get this error
/e
looks like vue-meta has a bug in 0.5.6 nuxt/vue-meta#82
routes.push({
path: '/zh-CN/changes.html',
component: () => import('../zh-CN/changes.md')
})
I want to use extension .html
for every page, so I add a route named /zh-CN/changes.html
. It works fine in dev mode but then I get a /zh-CN/changes.html.html
after ream generate
.
Any workaround for this situation? or I will have to write a script for rewriting names π
The correct behaviour is described by vue-meta here:
https://github.com/declandewet/vue-meta#how-metainfo-is-resolved
I have created an example of the issue here:
https://github.com/jazoom/ream-minimal
Steps:
Page 1
(which is a child of Home
)vmid
This causes issues with things like Facebook's parsing of OG tags.
I don't know how much of this is a bug with Ream's handling of vue-meta or within vue-meta itself.
Instead of directly serving the whole static folder at /:path*
:
We should still copy static
to output folder and add an option rootStaticFiles
to serve files in output folder to root path, eg:
/_ream/favicon.ico
will also be served as /favicon.ico
when you have rootStaticFiles: ['favicon.ico']
Furthur changes for folder serving strategy:
public
will be served through http server as /public
(not sure why we need this)static
will be copied to dist/static
instead of dist
, then you can access it via /_ream/static
dist/assets
instead of dist/static
Thanks for great work. I want to use Ream with my own ExpressJS, uWebsockets server. Is it possible?
Anyone would like to make some examples?
I can't seem to load the static files.
Vue File:
<img src="/static/img/placeholder.png"/>
File Structure
- src
- static
-- img
--- placeholder.png
https://github.com/ream/ream/tree/next
:/ i have no idea whats wrong
error during render : /
{ Error: Cannot find module 'axios'
at Function.Module._resolveFilename (module.js:455:15)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at r (C:\Users\marko\AppData\Roaming\nvm\v6.5.0\node_modules\ream\node_modules\vue-server-renderer\build.js:6964:16)
at Object.<anonymous> (webpack:/external "axios":1:0)
at __webpack_require__ (webpack:/webpack/bootstrap cada09c6e8c3112b4e53:25:0)
at Object.<anonymous> (0.server-bundle.js:73:64)
at __webpack_require__ (webpack:/webpack/bootstrap cada09c6e8c3112b4e53:25:0)
at Object.<anonymous> (0.server-bundle.js:46:72)
at __webpack_require__ (webpack:/webpack/bootstrap cada09c6e8c3112b4e53:25:0)
at Object.exports.modules.Object.defineProperty.value (src/views/Home.vue:7:0)
at __webpack_require__ (webpack:/webpack/bootstrap cada09c6e8c3112b4e53:25:0)
at process._tickCallback (internal/process/next_tick.js:103:7) code: 'MODULE_NOT_FOUND' }
api.js
import axios from 'axios'
const api = 'http://localhost:8080/wprest/wp-json/wp/v2'
axios.defaults.baseURL = api
let wordpresService = {
async getPosts() {
const data = await axios.get('posts')
}
}
export default wordpresService
home.vue
<style lang="scss" type="text/scss">
body {
background: red;
}
</style>
<template>
<div class="greg"></div>
</template>
<script>
import api from '../services/api'
//const api2 = 'http://localhost:8080/wprest/wp-json/wp/v2'
export default {
name: 'Home',
}
</script>
package.json
{
"name": "restshop",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "ream build",
"start": "ream start",
"dev": "ream dev"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-plugin-component": "^0.9.1",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3"
},
"dependencies": {
"axios": "^0.16.0",
"vue": "^2.2.6",
"vue-router": "^2.3.1"
}
}
/e i tried the example asyc-data still not working i use windows 10
node 6.5.0 lates ream beta
I want to use ream instead of nuxt because of its flexibility but the problem is I just don't know how to do that... SSR is a thing of server i.e. Expressjs & all docs are related to Vue. So how I am supposed to use that? I can make a simple express server and render some template based on handlebars engine but I don't know how to integrate REAM with experss and without that or easy DX, not many devs are going to use it no matter how flexible/powerful REAM is.
I keep getting this error in heroic deployment:
> [email protected] postinstall /tmp/build_4dc4038e016d7efeea98cb941984f357/node_modules/node-sass
remote: > node scripts/build.js
remote:
remote: module.js:472
remote: throw err;
remote: ^
remote:
remote: Error: Cannot find module 'lru-cache'
Branch | Build failing π¨ |
---|---|
Dependency | vue-template-compiler |
Current Version | 2.2.4 |
Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
As vue-template-compiler is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you itβs very likely also breaking them.
I recommend you give this issue a very high priority. Iβm sure you can resolve this πͺ
updated
hook not triggering update (@Kingwl via #5233)Vue.set
crashing when used on Arrays with non-number key (@pkaminski via #5216)v-show
not setting inline display property in SSR (@defcc via #5224)inject
option not reactive (@Kingwl via #5229)input[type=password]
behavior in IE9 (@ktsn via #5253)There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
This should be easy. Basically, we need to:
unvue.build()
const unvue = require('unvue')
unvue.generate({
paths: ['/', '/post/hello', '/post/world']
})
The generate
function might look like:
function generate(paths) {
const renderer = createRenderer()
paths.forEach(url => {
renderer.renderToString({ url }, (err, html) => {
fs.writeFileSync //...
})
})
}
Similar to fs-router-plugin (source code), a blog-plugin would be awesome, it reads source/**/*.md
and maps them into routes! saying ./source/2015/hello-world.md
becomes /2015/hello-world
.
Like asyncData
option
Please add support for asyncData https://nuxtjs.org/guide/async-data
Similar to Next.js/Nuxt.js 's pages
structure:
in src/index.js
do:
import createRouter from '@fs-router'
const router = createRouter({
// optional options...
})
export default { router }
Then this will automatically map ./pages/**/*.{vue,js}
to router routes with code-split support.
In nuxt, setting the router.base
config in nuxt.config.js
, will load assets from this base path instead of the origin root. This is important when serving the generated app from a directory.
How to do this with ream?
How token based authentication can be implemented with Ream. Is there any example available?
might use offline-plugin by @NekR
// pr welcome, I'm no expert in this
For example, fs-router could be implemented as a plugin:
module.exports = {
plugins: [ fsRouter() ]
}
function fsRouter() {
return (config) => {
const tmpRouter = os.tmpdir() + '/fs-router-' + Date.now() + '.js'
config.resolve.alias.add('@fs-router', tmpRouter)
// then watch `./pages` folder and generate router to `tmpRouter`
}
}
Context argument is not set in createRouter function for the path "/"
import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'
Vue.use(Router)
const createRouter = (context) => {
console.log(context)
const router = new Router({
mode: 'history',
routes: [{
path: '/',
component: () => import('./Home.vue')
}, {
path: '/about',
component: () => import('./About.vue')
}]
})
if (process.browser) {
const nprogress = require('nprogress')
require('nprogress/nprogress.css')
router.beforeEach((from, to, next) => {
nprogress.start()
next()
})
router.afterEach(() => {
nprogress.done()
})
}
return router
}
export default { createRouter }
i run the example,but throw the error "Cannot read property 'beforeEach' of undefined",
One can not see the example there ;)
Hi, can you explain the differences between nuxtjs and ream?
I mean if it just the same thing, why reinvent the wheel? And it would be nice if you write the differences on the faq section, so when people see this project they will know the differences quickly.
There should be in the documentation a mention of how to configure vue-router correctly.
@jnv found out that you have to use the history mode. See cvut/fittable-next@8444947#diff-15ee858ae5d5aa9b3e2846cfd1c4c466
Without the fix it's not possible to match server-rendered content on client.
I'm trying to achieve vue ssr runned by pm2. Ream would be perfect for my use case but the problem is that i'm trying to run multiple instances of it programmatically so I need multiple dist
folders.
My target would be that one instance would write to dist/in1/
, second one would write to dist/in2/
and so on.
It would be great to have dist folder configurable through ream.config.js
I am in the process of getting Ream working with an existing server application and I was getting a bunch of errors which I found to be due to my environment variable being changed by this call: ream()
.
The environment variable used by this project at the moment is 'dev'
. There does not seem to be a way to force ream()
to allow that. Using ream({dev: true})
makes NODE_ENV === 'development'
, which is obviously unhelpful to this particular application.
Perhaps environment variables should be left to the environment to set them?
Another thing that is broken in my app after updating Ream yesterday is the route is not available in state anywhere.
I can't find the offending change anywhere in the commits since beta 8.
Using the ream 2.0 beta, and preFetch does not seem to work, am I correct in assuming it is not supported yet? Could not seem to find the appropriate function calls.
The current logging on failed server-side render appears to be insufficient. Currently this is what it looks like:
const errorHandler = err => {
if (err && err.code === 404) {
res.statusCode = 404
res.end('404 | Page Not Found')
} else {
// Render Error Page or Redirect
res.statucCode = 500
res.end('500 | Internal Server Error')
console.error(`error during render : ${req.url}`)
console.error(err)
}
}
It seems that since 'err' is an actual JavaScript error object (or null) that sometimes nothing is logged. I have found something like this to be much more useful:
const errorHandler = err => {
if (err && err.code === 404) {
res.statusCode = 404
res.end('404 | Page Not Found')
} else {
console.log(`error during render : ${req.url}`);
if (err) {
console.log(err.stack);
} else {
console.trace();
}
// Render Error Page or Redirect
res.statucCode = 500
res.end('500 | Internal Server Error')
}
}
Hi,
Tried the pre-fetch-cache example.
I installed the node-sass
and sass-loader
to enable SCSS, but when I tried to add lang="scss"
on the style
block, I got this error in the terminal:
ERROR in ./src/views/Home.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Users/kenneth/Projects/unvue-test/src/views'
@ ./src/views/Home.vue 3:0-263
@ ./src/router.js
@ ./src/index.js
@ ./~/unvue/app/client-entry.js
@ multi ./~/unvue/app/dev-client.js @owndir/app/client-entry
https://ssr.vuejs.org/en/ Pending Vue 2.3 release though
Currently we use a standalone express dev server to run the client-side webpack compiler:
And we use a proxy in the actual http request handler to serve webpack assets from the dev server:
maybe we can simply attach those two middlewares (webpack-dev-middle-ware & webpack-hot-middleware) to our request handler instead of creating a new dev server.
To reproduce just clone this project: https://github.com/jazoom/ream-minimal
then run:
$ yarn
$ npm run build
$ npm run start
then navigate to http://localhost:4000/_ream/not-exist.js
You will get this error:
TypeError: next is not a function
at SendStream.error (C:\WebProjects\ream-minimal\node_modules\serve-static\index.js:121:7)
at emitOne (events.js:96:13)
at SendStream.emit (events.js:188:7)
at SendStream.error (C:\WebProjects\ream-minimal\node_modules\send\index.js:282:17)
at SendStream.onStatError (C:\WebProjects\ream-minimal\node_modules\send\index.js:433:12)
at onstat (C:\WebProjects\ream-minimal\node_modules\send\index.js:734:26)
at FSReqWrap.oncomplete (fs.js:123:15)
My app was working fine in version v1.0.0-beta.9 but with any later version it is very broken. Yes, I've made the changes for Vue 2.3.
After a lot of hunting I've narrowed down the problem to Ream's config. If pretty much anything is placed in the config the app stops working. I've made a small app to demonstrate. You'll notice that the router doesn't work at all.
https://github.com/jazoom/ream-minimal
However, if you change:
const app = ream({
dev: process.env.NODE_ENV !== 'production',
html: { template: 'src/index.html' },
entry: 'src/index.js'
});
to:
const app = ream({
dev: process.env.NODE_ENV !== 'production'
});
it works just fine.
It also doesn't work if the only thing in there is my extensions to Webpack config.
Actually, while I said it works fine without the config, in this minimal example for some reason the app is still broken due to a "mismatch" between server and client. I can't see where that's coming from in this example (perhaps another bug), but I don't have that problem in my actual full project.
I used the custom-koa-server
and can't run it always getting the error:
remote: ERROR in ./~/ream/app/App.vue
remote: Module build failed: Error: Cannot find module 'lru-cache'
remote: at Function.Module._resolveFilename (module.js:470:15)
remote: at Function.Module._load (module.js:418:25)
remote: at Module.require (module.js:498:17)
remote: at require (internal/module.js:20:19)
remote: at Object.<anonymous> (/tmp/build_55aad07f5c932805d0e2761b00b04633/node_modules/vue-loader/lib/parser.js:2:13)
remote: at Module._compile (module.js:571:32)
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.