Giter Site home page Giter Site logo

ream / deprecated Goto Github PK

View Code? Open in Web Editor NEW
831.0 32.0 56.0 1.3 MB

πŸš€ Framework for building universal web app and static website in Vue.js (beta)

Home Page: https://ream.js.org

License: MIT License

JavaScript 98.76% Vue 1.24%
vue server-rendering universal webpack server express koa http

deprecated's Introduction

This project is deprecated in favor of https://vapperjs.org

NPM version NPM downloads CircleCI
donate chat

Install

yarn add ream

Usage

Unlike a regular Vue SPA, you must export a function which returns an object in your app entry in order to make it work with Ream:

// index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default () => ({
  router: new Router({
    mode: 'history',
    routes: [{
      path: '/',
      // Dynamically load your index component
      component: () => import('./index.vue')
    }]
  })
})

And that's it, run ream dev and have fun playing with your app at http://localhost:4000.

Roadmap

  • Document how to modify internal webpack config.
  • Add proper tests.

To make things happen faster, you may consider becoming a patron to support the development:

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

ream Β© egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist Β· GitHub @egoist Β· Twitter @_egoistlily

deprecated's People

Contributors

egoist avatar ilyasemenov avatar voiding avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

deprecated's Issues

Context argument is not set in createRouter function for the path "/"

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 }

404, static files.

I can't seem to load the static files.

Vue File:

<img src="/static/img/placeholder.png"/>

File Structure

- src
- static
    -- img
    --- placeholder.png

Uglify error on build

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

Use with Koa/Http module

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)
})

example with socket.io

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...

fs-router

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.

Automatically add routes for `generate` command

{
  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.

An in-range update of vue is breaking the build 🚨

Version 2.2.5 of vue just got published.

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 πŸ’ͺ


Status Details
  • ❌ ci/circleci Your tests failed on CircleCI Details
Release Notes v2.2.5

Fixed

Commits

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.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

SCSS loader issue

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

a path named /zh-CN/changes.html will generate out a file named /zh-CN/changes.html.html

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 πŸ˜…

rootStaticFiles

Instead of directly serving the whole static folder at /:path*:

https://github.com/ream/ream/blob/d96bae0f853a37b1d2955994f9ce1c73da92b24a/packages/ream-core/lib/index.js#L157-L165

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
  • Importing static file in your app will generate files in dist/assets instead of dist/static

[Feature request] Possibility to change dist folder

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

Child metadata does not overwrite parent metadata

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:

  1. Right click and select "View page source" -> metadata displays correctly
  2. Navigate to Page 1 (which is a child of Home)
  3. Right click and select "View page source" -> metadata is duplicated, despite the use of 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.

Heroku deployment

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'

An in-range update of vue-template-compiler is breaking the build 🚨

Version 2.2.5 of vue-template-compiler just got published.

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 πŸ’ͺ


Status Details
  • ❌ ci/circleci Your tests failed on CircleCI Details
Release Notes v2.2.5

Fixed

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Error during render not being logged sometimes

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')
        }
      }

Remove standalone dev server

Currently we use a standalone express dev server to run the client-side webpack compiler:

https://github.com/ream/ream/blob/d96bae0f853a37b1d2955994f9ce1c73da92b24a/packages/ream-core/lib/setup-dev-server.js#L7

And we use a proxy in the actual http request handler to serve webpack assets from the dev server:

https://github.com/ream/ream/blob/d96bae0f853a37b1d2955994f9ce1c73da92b24a/packages/ream-core/lib/index.js#L142-L150

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.

Difference between nuxtjs?

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.

Don't automatically (and opaquely) change the NODE_ENV environment variable

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?

Server Crash when exporting vuex store (vue-meta)

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

Cannot find module 'fs-promise'

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?

Ream config is broken

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.

Server crash when requesting a non-existant file in /_ream

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)

ream redirects to base path when app has a store

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.

Ream 2.0 `preFetch`

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.

Plugin system

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`
  }
}

No Express+Vue (ssr) boilerplate

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.

Static website generator

This should be easy. Basically, we need to:

  1. generated assets files (js/css/chunks), it's as easy as unvue.build()
  2. generated html files based on user-supplied routes:
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 //...
    })
  })
}

Error when deploying

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)

cant install axios module not found

:/ 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

Examples

Anyone would like to make some examples?

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.