Git Product home page Git Product logo

hygraph-sveltekit-portfolio-and-blog-starter's Introduction

Hygraph SvelteKit Portfolio and Blog Starter

Minimalist Developer Portfolio and Blog built with SvelteKit, Tailwind, daisyUI, and deployed to Vercel.

Clone project Deploy with Vercel

The stack

This is an example project generated with the Hygraph Developer Portfolio and Blog starter.

  • Hygraph: Manage projects and blog posts.
  • SvelteKit: A powerful framework that lets us query data and use endpoints for server side data.
  • Vercel: For an intuitive Git based workflow with seamless publishing.

How to use

  1. Clone the repository and install the project dependencies
npx degit Hygraph/hygraph-sveltekit-portfolio-and-blog-starter#main portfolio
cd portfolio
pnpm i
  1. Provide your Hygraph project keys

In order to use this starter, you'll need to have created a new Hygraph project using our Portfolio Template. You can clone the project using this link.

cp sample.env .env

Inside of your newly created .env file, you need to add your project endpoint to the VITE_HYGRAPH_ENDPOINT variable. You can find it on Project settings -> API Access -> Content API.

  1. Start building 🎉
pnpm dev

hygraph-sveltekit-portfolio-and-blog-starter's People

Contributors

jpedroschmitz avatar martian2lee avatar spences10 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

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

hygraph-sveltekit-portfolio-and-blog-starter's Issues

TypeError: Only absolute URLs are supported

When following the instructions to build this starter locally, once I do pnpm i and pnpm dev I get:

PS C:\Users\Maxi\Documents\GitHub\maxijabase.dev> pnpm dev

> [email protected] dev C:\Users\Maxi\Documents\GitHub\maxijabase.dev
> vite dev

Your jsconfig.json should extend the configuration generated by SvelteKit:
{
  "extends": "./.svelte-kit/tsconfig.json"
}

  VITE v3.0.3  ready in 548 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected]\node_modules\node-fetch\lib\index.js:1305
                throw new TypeError('Only absolute URLs are supported');
                      ^

TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected]\node_modules\node-fetch\lib\index.js:1305:9)
    at C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected]\node_modules\node-fetch\lib\index.js:1410:19
    at new Promise (<anonymous>)
    at fetch (C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected]\node_modules\node-fetch\lib\index.js:1407:9)
    at fetch (C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected]\node_modules\cross-fetch\dist\node-ponyfill.js:10:20)
    at C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected][email protected]\node_modules\graphql-request\dist\index.js:164:42
    at step (C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected][email protected]\node_modules\graphql-request\dist\index.js:63:23)
    at Object.next (C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected][email protected]\node_modules\graphql-request\dist\index.js:44:53)
    at C:\Users\Maxi\Documents\GitHub\maxijabase.dev\node_modules\.pnpm\[email protected][email protected]\node_modules\graphql-request\dist\index.js:38:71
    at new Promise (<anonymous>)
 ELIFECYCLE  Command failed with exit code 1.

Deploying to Vercel resulting in 404

Trying to deploy this Sveltekit app to Vercel but it results in 404 not found. I am using the adapter-auto, and I have added the env variable to Vercel.

When running npm run preview everything works totally fine.

There is nothing out of the ordinary in the build logs on Vercel and it says that the deploy is successful.

Is there any step I might be missing?

image

Only Absolute URLs are Supported

Following the tutorial but getting this error after adding the first two scripts to /src/routes/index.svelte and using npm run dev in the tutorial.

Only absolute URLs are supported
TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (C:\Users\***\my-developer-portfolio\node_modules\node-fetch\lib\index.js:1327:9)
    at C:\Users\node_modules\node-fetch\lib\index.js:1440:19
    at new Promise (<anonymous>)
    at fetch (C:\Users\***\my-developer-portfolio\node_modules\node-fetch\lib\index.js:1437:9)
    at fetch (C:\Users\***\my-developer-portfolio\node_modules\cross-fetch\dist\node-ponyfill.js:10:20)
    at C:\Users\***\my-developer-portfolio\node_modules\graphql-request\dist\index.js:166:42
    at step (C:\Users\***\my-developer-portfolio\node_modules\graphql-request\dist\index.js:63:23)
    at Object.next (C:\Users\***\my-developer-portfolio\node_modules\graphql-request\dist\index.js:44:53)
    at C:\Users\***\my-developer-portfolio\node_modules\graphql-request\dist\index.js:38:71
    at new Promise (<anonymous>)

The LocalHost then displays an error 500 with the above shown.

Can anyone please help?

Top-level await is not available in the configured target environment

Hello, I am having an issue when running npm run build

[vite:esbuild-transpile] Transform failed with 3 errors:
chunks/site-metadata-207b96de.js:118:17: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
chunks/site-metadata-207b96de.js:126:17: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
chunks/site-metadata-207b96de.js:134:22: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
116|  };
117|  
118|  socialsStore.set(await fetchSocials());
   |                   ^
119|  
120|  const fetchAuthors = async () => {

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
124|  };
125|  
126|  authorsStore.set(await fetchAuthors());
   |                   ^
127|  
128|  const fetchSiteMetadata = async () => {

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
132|  };
133|  
134|  siteMetadataStore.set(await fetchSiteMetadata());
   |                        ^
135|  
136|  export { authorsStore as a, authorsQuery as b, client as c, siteMetadataStore as d, articleQuery as e, projectQuery as f, projectsQuery as p, socialsStore as s };

Coming from stores/site-metadata.js

Here is my config:

import adapter from '@sveltejs/adapter-auto'
import path from 'path'
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    vite: {
      ssr: {
        external: ['whatwg-url'],
      },
      resolve: {
        alias: {
          $components: path.resolve('./src/lib/components'),
          $lib: path.resolve('./src/lib'),
          $stores: path.resolve('./src/stores'),
        },
      },
    },
  },

  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}

export default config

I had to delete the target code due to this error:
> config.kit.target is no longer required, and should be removed

And added

 ssr: {
        external: ['whatwg-url'],
      },

due to ssr issues that were solved by making the changes recommended here.

Severity: high with no workaround. I changed the above code to:

import { client } from '$lib/graphql-client'
import {
  authorsQuery,
  siteMetadataQuery,
  socialsQuery,
} from '$lib/graphql-queries'
import { writable } from 'svelte/store'

export const socialsStore = writable({})
export const authorsStore = writable({})
export const siteMetadataStore = writable({})

const fetchSocials = async () => {
  const { socials } = await client.request(socialsQuery)

  return socials[0]
}

fetchSocials().then(output => socialsStore.set(output))

const fetchAuthors = async () => {
  const { authors } = await client.request(authorsQuery)

  return authors[0]
}

fetchAuthors().then(output => authorsStore.set(output))

const fetchSiteMetadata = async () => {
  const { projectMetadatas } = await client.request(siteMetadataQuery)

  return projectMetadatas[0]
}

fetchSiteMetadata().then(output => siteMetadataStore.set(output))

And was able to build and deploy, but I get an internal server error.

with the following error in my logs:

(node:438) 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: 6)```

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.