Giter Club home page Giter Club logo

sapper-typescript-graphql-template's Introduction

๐ŸŒ Sapper with TypeScript and GraphQL project base

โ“ What is this?

This is an extension to the official Sapper Rollup template with TypeScript preprocessing and a GraphQL server through TypeGraphQL (Apollo Server).

If you're looking for something with much, much more bundled in, check out my opinionated project base.

๐Ÿงญ Project Status

This project base will continue to be maintained until SvelteKit is ready.

Once you are prepared to migrate, check out the Svelte Adders project for information about how to recreate this project base's functionality. You should specifically look at svelte-add-graphql.

Read on to use this project base today:

๐Ÿ“‹ Copy

Choose either to clone or fork depending on your preference.

๐Ÿ‘ Clone

git clone https://github.com/babichjacob/sapper-typescript-graphql-template

๐Ÿด Fork

Click the Use this template button on this project's GitHub page.

โฌ‡๏ธ Install Dependencies

cd sapper-typescript-graphql-template
npm install  # pnpm also works

๐Ÿ›  Usage

๐Ÿงช Development

npm run dev

๐Ÿ”จ Building for Production

npm run prod

๐Ÿ“ฆ Exporting a Static Site

Your GraphQL server will not be exported with the rest of the site.

npm run export

โš™ Configuration

โšก Web app

Many of the fields in static/manifest.json (short_name, name, description, categories, theme_color, and background_color) are filled with demonstrative values that won't match your site. Similarly, you've got to take new screenshots to replace the included static/screenshot-1.png and static/screenshot-2.png files. If you want, you can add app shortcut definitions for "add to home screen" on Android. Once you change theme_color, update the meta name="theme-color" tag in src/template.html to match.

The Apple touch icon, favicon, and logo- files (also all in the static directory) are created by placing the logo within a "safe area" centered circle that takes up 80% of the canvas's dimension. For instance, the constraining circle in logo-512.png is 512 ร— 0.80 = 409.6 โ‰ˆ 410 pixels wide and tall.

๐Ÿ—บ Source maps

This project base comes with source maps enabled during development and disabled during production for the best compromise between performance and developer experience. You can change this behavior through the sourcemap variable in rollup.config.js.

๐Ÿ•ธ Optionally removing the GraphQL server

  1. Remove these lines in src/server.ts:

    1. import { createApolloServer } from "./graphql";
    2. const apolloServer = await createApolloServer();
    3. apolloServer.applyMiddleware({ app, path: graphqlPath });
  2. Remove the now-useless graphqlPath parameter to createSapperAndApolloServer in src/server.ts. This is also a good opportunity to rename the function since there is no longer an Apollo Server

  3. Delete the src/graphql folder

  4. Uninstall the apollo-server-express, bufferutil, class-validator, graphql, reflect-metadata, type-graphql, and utf-8-validate packages

๐Ÿ˜ต Help! I have a question

Create an issue and I'll try to help.

๐Ÿ˜ก Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

I'm sorry, because of my skill level and the fragility of (the combination of) some of these tools, there are likely to be problems in this project. Thank you for bringing them to my attention or fixing them for me.

๐Ÿ“„ License

MIT


This README was generated with โค๏ธ by readme-md-generator

sapper-typescript-graphql-template's People

Contributors

albertms10 avatar babichjacob avatar benmccann avatar dependabot[bot] avatar jayphen 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

Watchers

 avatar  avatar

sapper-typescript-graphql-template's Issues

Hot reloading (automatic refreshing) from TypeScript files

From Carlo$#3952 on Discord

My issue is this:

//client.ts
import * as sapper from "@sapper/app";
import { setup } from "fileInSRCNodeModules";

(async () => {
  await setup();
  await sapper.start({
    target: document.querySelector("#sapper")
  });
)();

When I run

npm run dev

I get:

Could not load C:/example/src/node_modules/fileInSRCNodeModules.ts (imported by C:\example\src\client.ts): Debug Failure. False expression: Expected fileName 
to be present in command line

Edit 1:
Creating the file in "/src/someFile.ts" or even "/src/folder/someFile.ts"
And then calling it from "client.ts" as -

import { setup } from "./someFile.ts"

works

am I accidently not allowing "node_modules" access? But "@sapper/app" works

Unrecognized option 'defaults' (VS Code)

Hi, If I clone this repository I get typehint errors on all svelte files that read:

Unrecognized option 'defaults'

This photo shows how the "error" appears to occur at the top of every file.

image

Curiously, this only appears to be an issue with VS Code typescript extension. No issues/errors are reported when running npm run validate or npm run dev.

To reproduce

git clone https://github.com/babichjacob/sapper-typescript-graphql-template
cd sapper-typescript-graphql-template
npm i
code .

Things I've tried:

  • Setting lang="ts" does nothing
  • Not connected to the <script> tag per se. Just the first character in each file.
  • Remove "defaults" option in sveltePreprocess does nothing.
  • Not seeing anything like this in main svelte/sapper repos so thought I'd check in here first.

Document optionally removing the GraphQL server

Now that Svelte TypeScript support is official, people are looking for the same for Sapper.

It would go a long way to show how to remove the GraphQL server some people don't want to demonstrate the right way:tm: to have TypeScript for Sapper.

Unexpected token eslint(ParseError)

Hi! Variables with interface throw error "Unexpected token eslint(ParseError)".
This is in the latest clone of the template. "version": "2020.09.10",

npm run eslint:fix

/.../sapper-typescript-graphql-template/src/routes/_layout.svelte
11:20  error  Unexpected token  ParseError

Eslint highlight show error as well.
export let segment: string = ""; >>> Unexpected token eslint(ParseError)

I faced this problem too in my project. And still can't solve it.

`npm run dev` results in "Could not resolve entry module (undefined\server.ts)."

Git cloned latest master (22a2cce)

Ran npm i followed by npm run dev

Received error: "Could not resolve entry module (undefined\server.ts)."

For reference:
$ npm -v
6.14.7
$ node -v
v14.8.0

Log:
$ npm run dev

[email protected] dev C:\dev\sapper-typescript-graphql-template
run-p validate:dev sapper:dev

[email protected] validate:dev C:\dev\sapper-typescript-graphql-template
svelte-check --ignore src/node_modules/@sapper --watch

[email protected] sapper:dev C:\dev\sapper-typescript-graphql-template
sapper dev

Loading svelte-check in workspace: c:\dev\sapper-typescript-graphql-template
Getting Svelte diagnostics...

====================================
svelte-check found no errors and no warnings
โœ— client
Could not resolve entry module (undefined\client.ts).
(node:19904) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte
at C:\dev\sapper\dist\create_manifest_data.js:319:19
at Array.forEach ()
at extract_css (C:\dev\sapper\dist\create_manifest_data.js:314:16)
at RollupResult.to_json (C:\dev\sapper\dist\create_manifest_data.js:458:18)
at handle_result (C:\dev\sapper\dist\dev.js:272:55)
at C:\dev\sapper\dist\dev.js:356:17
at WatchEmitter. (C:\dev\sapper\dist\create_manifest_data.js:590:37)
at WatchEmitter.emit (events.js:314:20)
at Watcher.emit (C:\dev\sapper-typescript-graphql-template\node_modules\rollup\dist\shared\watch.js:611:22)
at Watcher.run (C:\dev\sapper-typescript-graphql-template\node_modules\rollup\dist\shared\watch.js:649:18)
(Use node --trace-warnings ... to show where the warning was created)
(node:19904) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:19904) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
โœ— server
Could not resolve entry module (undefined\server.ts).

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.