Giter Site home page Giter Site logo

jasoncabot / workers-application Goto Github PK

View Code? Open in Web Editor NEW
2.0 3.0 0.0 297 KB

Template project for starting a React frontend, Workers backend in Typescript with a separate shared library

License: MIT License

JavaScript 14.47% TypeScript 51.37% HTML 22.17% CSS 11.98%
cloudflare-pages cloudflare-workers durable-objects esbuild react typescript

workers-application's Introduction

Create single page React application backed by Cloudflare workers

  • React Frontend deployed to Cloudflare Pages
  • Backend deployed to Cloudflare Workers
  • Shared module written in Typescript
  • Debuggable using VS Code
  • Testing for everything
  • Live reloading for frontend and backend
  • Environment variable and secret support
  • Continuous Deployment via GitHub Actions

How to use

  • Use template to create your own repository
  • Sign up for Cloudflare
  • Create an API Token
  • Create a GitHub Secret called CLOUDFLARE_API_TOKEN with this value
  • Create a GitHub Secret called CLOUDFLARE_ACCOUNT_ID with your Cloudflare account id
  • Update the name of your application in wrangler.toml

Details

Backend

Typescript backend deployed to Cloudflare Workers

Dev

Runs locally with live reloading

cd backend
yarn
yarn dev

Test

cd backend
yarn
yarn test

Prod

Produces a backend/dist/ containing assets to be deployed

cd backend
yarn
yarn build

Frontend

Single page application using React, deployed to Cloudflare Pages

Dev

Runs locally with live reloading

cd shared
yarn
yarn link
yarn start # required for live reloading of shared module
cd ../frontend
yarn
yarn link @app/shared # required for live reloading of shared module
yarn start

Test

cd backend
yarn
yarn test

Prod

Produces a frontend/dist/ containing assets to be deployed

cd shared
yarn
yarn build
cd ../frontend
yarn
yarn build

workers-application's People

Contributors

jasoncabot avatar

Stargazers

 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.