Git Product home page Git Product logo

remix-edge-kit's Introduction

Welcome to Remix!

Setup?

Configure the database ft. Railway App(PostgreSQL)

  • Install the Railway.app CLI by following the instructions at https://docs.railway.app/cli/installation
  • Once installed, login to it railway login and initialize a new Railway project railway init
  • Provide the following details
    Starting Point: Empty Project
    ✔ Enter project name: project-name
    ✔ Environment: production
  • Go to URL: https://railway.app/project/[project-id]/setup and link your project through the CLI railway link [project-id]`
  • Go to PostgreSQL plugin page, the Connect tab, and copy the Postgres Connection URL (to be used in the Prisma config section)
  • To interact with the service through CLI, the other commands you might use are railway run <cmd>(run commnds in the railway environments) or railway up(to deploy your app)

Use Data Proxy URLs

For running on the edge, you'd be required to use the Prisma Data Platform (Data Proxy URLs) to interact with your cloud DB instance(no local connections allowed). Get connection string of the form prisma://aws-us-east-1.prisma-data.com/?api_key=... from the data platform, by connecting your cloud DB instance.

Setup Prisma

  1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
  2. Set the provider of the datasource block in schema.prisma to match your database: postgresql(for us). There are other configs we're not using like mysql, sqlite, sqlserver (Preview) or mongodb (Preview).
  3. Run npx prisma db pull to turn your database schema into a Prisma schema
  4. Open the .env file and place the connecting string(Postgres Connection URL) against DATABASE_URL. Prisma is smart enough to use this by its special annotation in the /prisma/schema.prisma file env("DATABASE_URL"). Keep postgresql as the DB type
  5. Run npm run generate to generate the Prisma Client (with Data Proxy enabled) . You can then start querying your database.

Misc Steps

  • Migrate: npm run migrate:dev and npm run migrate:deploy
  • Seed: npm run seed
  • Reset - npm run migrate:reset All the above commands require the original connection string, so keep the connection string handy, and manually update them in schema.prisma before running your local migrations. Once done, revert back to the original Data Proxy URLs to allow for Prisma client calls

Others

To open studio use npx prisma studio

Development

You will be running several processes during development:

  • The Miniflare server (miniflare is a local environment for Cloudflare Workers)
  • The Remix development server
  • TailwindCSS server to watch and emit updated CSS files
# in one tab, start the remix dev server
$ npm run dev

If you'd like to change any aspects of this behavior, see how the commands are configured in your package.json file

Open up http://127.0.0.1:8787 and you should be ready to go!

Deployment

Use wrangler to build and deploy your application to Cloudflare Workers. If you don't have it yet, follow the installation guide to get it setup. Be sure to authenticate the CLI as well.

If you don't already have an account, then create a cloudflare account here and after verifying your email address with Cloudflare, go to your dashboard and set up your free custom Cloudflare Workers subdomain.

Once that's done, you should be able to deploy your app:

npm run deploy

remix-edge-kit's People

Contributors

one-aalam avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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