Git Product home page Git Product logo

now-sapper-demo's Introduction

Serverless Sapper for Now v2 - demo

by @antony

This is a demonstration of a Dynamic (i.e. not Static / Exported) Sapper Template to Now v2, using the Now Sapper builder.

Static assets from your application are served from the now CDN.

Usage

Check out this project from git:

npx degit beyonk-adventures/now-sapper-demo now-sapper-demo
cd now-sapper-demo
npm i

and deploy it to now:

npx now

Testing changes

You can deploy using a git repository as the builder. Have a look at now.test.json.

npm run deploy:test

Local Usage (Now Dev)

At the current time, Zeit's now dev emulator lags significantly behind the real service, and as such, the now-sapper module will not work locally. You will encounter the following error:

> Now CLI 16.2.0 dev (beta) — https://zeit.co/feedback/dev
> Creating initial build
> Error! Unknown file type: undefined

Caveats

Though serverless, your Sapper application will still run all routes from a single endpoint /*. It does not (yet) support route splitting / differential bundling. I have tried this with a hefty Sapper application, and have not found this to be an issue, though it would be optimal to add this feature.

now-sapper-demo's People

Contributors

ahpercival 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

Watchers

avatar avatar avatar

Forkers

donovanh anndream auladinglese lgs gh0ystschool jamiekieranmartin stephensmitchell-forks

now-sapper-demo's Issues

Example of Express usage

I've tried adjusting the example project to use Express but it doesn't seem to work. Here's the fork in which I made the adjustments:

https://github.com/donovanh/now-sapper-demo

The above runs locally but when deployed to Now fails with a "missing server.js" error (no build errors though). I'm not sure why.

Maybe I've missed something? Either way it could be good to have an example implementation if it can be made to work.

"api" Routing

It would be nice if the routing mechanism avoid routing "api" to sapper middleware, so I can write my own lambdas there. I tried to figure it out myself but I am not sure if it is polka thing or it is defined somewhere else.

Doesn't run on Now - runtime error: Cannot find module '__sapper__/build/server/server.js'

Following the instructions in README, the deploy works but accessing the site returns:

502: BAD_GATEWAY Code: NO_STATUS_CODE_FROM_FUNCTION ID: zrh1:nlhgc-1578387009262-42def78975a8

and the runtime logs show the error:

START RequestId: a676d17f-04a7-4398-972a-82f4d80f4b5d Version: $LATEST
2020-01-06T12:45:34.516Z	undefined	ERROR	Server is not listening Error: Cannot find module '__sapper__/build/server/server.js'
Require stack:
- /var/task/launcher.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/var/task/launcher.js:17:14)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/launcher.js',
    '/var/runtime/UserFunction.js',
    '/var/runtime/index.js'
  ]
}END

Notable in the build log is server.js is 128kb and highlighted in orange. And server.js doesn't exist in the output files generated.

Build log:

Downloading 27 deployment files...
Installing build runtime...
Build runtime installed: 1475.503ms
Looking up build cache...
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

added 236 packages from 174 contributors in 3.446s
Running "npm run build"

> [email protected] build /zeit/7f2f53cc
> ls && sapper build

appveyor.yml
cypress.json
node_modules
package.json
package-lock.json
README.md
rollup.config.js
src
static
> Building...

�[36m┌──────────────┐�[39m
�[36m│ �[1mbuilt client�[22m │�[39m
�[36m└──────────────┘�[39m
�[1m�[37m   1.35 kB index.05aaa8e5.js�[22m�[39m
�[90m           └ src/routes/index.svelte�[39m
�[1m�[37m     695 B about.bfeb6495.js�[22m�[39m
�[90m           └ src/routes/about.svelte�[39m
�[1m�[37m   4.41 kB index.542cb0f9.js�[22m�[39m
�[90m           └ node_modules/svelte/internal/index.mjs�[39m
�[1m�[37m   1.07 kB [slug].b19aeb10.js�[22m�[39m
�[90m           └ src/routes/blog/[slug].svelte�[39m
�[1m�[37m    1.7 kB index.7798011b.js�[22m�[39m
�[90m           └ src/routes/blog/index.svelte�[39m
�[1m�[37m   13.5 kB client.a0f52886.js�[22m�[39m
�[90m           │ src/node_modules/@sapper/app.mjs (38.2%)�[39m
�[90m           │ src/node_modules/@sapper/internal/App.svelte (22.7%)�[39m
�[90m           │ src/components/Nav.svelte (12.2%)�[39m
�[90m           │ src/routes/_error.svelte (10.9%)�[39m
�[90m           │ src/routes/_layout.svelte (7.2%)�[39m
�[90m           │ node_modules/svelte/store/index.mjs (5.3%)�[39m
�[90m           │ src/node_modules/@sapper/internal/manifest-client.mjs (3.2%)�[39m
�[90m           │ src/client.js (0.2%)�[39m
�[90m           └ src/node_modules/@sapper/internal/shared.mjs (0.2%)�[39m

�[36m┌──────────────┐�[39m
�[36m│ �[1mbuilt server�[22m │�[39m
�[36m└──────────────┘�[39m
�[1m�[33m    128 kB server.js�[22m�[39m
�[90m           │ src/node_modules/@sapper/server.mjs (76.7%)�[39m
�[90m           │ src/routes/blog/_posts.js (3.9%)�[39m
�[90m           │ node_modules/svelte/internal/index.mjs (3.4%)�[39m
�[90m           │ src/components/Nav.svelte (2.9%)�[39m
�[90m           │ src/routes/blog/[slug].svelte (2.7%)�[39m
�[90m           │ src/routes/index.svelte (2.0%)�[39m
�[90m           │ src/routes/_error.svelte (1.5%)�[39m
�[90m           │ src/routes/blog/index.svelte (1.4%)�[39m
�[90m           │ node_modules/svelte/store/index.mjs (1.3%)�[39m
�[90m           │ src/routes/_layout.svelte (1.0%)�[39m
�[90m           │ src/node_modules/@sapper/internal/App.svelte (1.0%)�[39m
�[90m           │ src/node_modules/@sapper/internal/manifest-server.mjs (0.9%)�[39m
�[90m           │ src/routes/blog/[slug].json.js (0.4%)�[39m
�[90m           │ src/server.js (0.3%)�[39m
�[90m           │ src/routes/about.svelte (0.2%)�[39m
�[90m           │ src/routes/blog/index.json.js (0.2%)�[39m
�[90m           └ src/node_modules/@sapper/internal/shared.mjs (0.0%)�[39m

�[36m┌─────────────────────┐�[39m
�[36m│ �[1mbuilt serviceworker�[22m │�[39m
�[36m└─────────────────────┘�[39m
�[1m�[37m   1.22 kB service-worker.js�[22m�[39m
�[90m           │ src/service-worker.js (83.9%)�[39m
�[90m           └ src/node_modules/@sapper/service-worker.js (16.1%)�[39m

> Finished in 1.9s. Type �[1m�[36mnode __sapper__/build�[22m�[39m to run the app.
yarn install v1.17.3
warning package.json: No license field
info No lockfile found.
warning [email protected]: No license field
[1/4] Resolving packages...
warning [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.
warning [email protected]: This module has been deprecated and is no longer maintained. Please use @rollup/plugin-json.
warning [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.
warning [email protected]: This module has moved and is now available at @rollup/plugin-replace. Please update your dependencies. This version is no longer maintained.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 4.33s.
done

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.