Giter Site home page Giter Site logo

rishi-raj-jain / nuxt-turso-edgio-example Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 437 KB

A demo showing off Turso + Nuxt + Auth + Edgio in action!

Home Page: https://rishi-raj-jain-turso-default.layer0-limelight.link/

License: MIT License

JavaScript 4.53% TypeScript 61.87% Vue 33.60%
auth edgio turso

nuxt-turso-edgio-example's Introduction

Nuxt Todo List on the Serverless with Edgio

A demonstration using Nuxt with server-side rendering on the serverless, authentication and database using SQLite (Turso).

https://github.com/rishi-raj-jain/nuxt-turso-edgio-example

Live demo:

Features

  • Server-Side Rendering
  • Authentication backed-in
  • Leverage SQLite as database with migrations

Stack

  • Frontend:
    • Nuxt - The Vue Framework for Web Architects
    • TailwindCSS for styling and layout
  • Backend:

Setup

Make sure to install the dependencies using npm:

npm i

Create a GitHub Oauth Application with:

  • Homepage url: http://localhost:3000
  • Callback url: http://localhost:3000/api/auth/github

Add the variables in the .env file:

NUXT_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"

To create sealed sessions, you also need to add NUXT_SESSION_PASSWORD in the .env with at least 32 characters:

NUXT_SESSION_PASSWORD=your-super-long-secret-for-session-encryption

Development

Start the development server on http://localhost:3000

edg dev

Deploy on Edgio

edg deploy

Environment variables

NUXT_GITHUB_CLIENT_ID="..."
NUXT_GITHUB_CLIENT_SECRET="..."
NUXT_SESSION_PASSWORD="..."
TURSO_DB_URL="..."
TURSO_DB_TOKEN="..."

Build command

Set the build command to:

edg build

And the output directory to ./.edgio

Turso Database

You can also use Turso database by creating a database and adding the following env variables:

TURSO_DB_URL=...
TURSO_DB_TOKEN=...

License

MIT License

nuxt-turso-edgio-example's People

Contributors

rishi-raj-jain avatar

Watchers

 avatar

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.