Total Pageviews

Showing posts with label react. Show all posts
Showing posts with label react. Show all posts

Thursday, 20 August 2026

oxre

 Blazingly fast React project scaffold written in Rust

oxre scaffolds React projects with no network requests. All templates embedded.

🚀 Quick Start

# Install
cargo install oxre

# Create React app
oxre my-app

# Create TypeScript app  
oxre my-ts-app --typescript

# Start coding
cd my-app && npm install && npm run dev

⚡ Why oxre?

  • Works offline - No network requests needed
  • Embedded templates - Everything built-in
  • Simple - Just one command
  • Modern stack - React 18 + Vite 5

🛠️ What You Get

  • React 18 + Vite 5
  • TypeScript support (--typescript)
  • ESLint configured
  • Modern project structure
  • Ready to run

🤔 Why I Built oxre

Wanted a React scaffolder that:

  • Works offline
  • Has no network dependencies
  • Uses modern tools
  • Just works
from https://github.com/ddoemonn/oxre

Sunday, 12 July 2026

基于Django(后端程序)和 React(前端程序)的协作文本编辑程序docs

 

Docs is an open-source text editor: web-native, made for real-time collaboration, cleanly structured documents and sub-documents with full ownership of your data. Built to scale with Django(后端程序) and React(前端程序)

 

La Suite Docs: Collaborative Text Editing

Docs, where your notes can become knowledge through live collaboration.

Docs is an open-source collaborative editor that helps teams write, organize, and share knowledge together - in real time.

What is Docs?

Docs is an open-source alternative to tools like Notion or Google Docs, focused on:

  • Real-time collaboration
  • Clean, structured documents
  • Knowledge organization
  • Data ownership & self-hosting

Built for public organizations, companies, and open communities.

Why use Docs?

Writing

  • Rich-text & Markdown editing
  • Slash commands & block system
  • Beautiful formatting
  • Offline editing
  • Optional AI writing helpers (rewrite, summarize, translate, fix typos)

Collaboration

  • Live cursors & presence
  • Comments & sharing
  • Granular access control

Knowledge management

  • Subpages & hierarchy
  • Searchable content

Export/Import & interoperability

  • Import to .docx and .md
  • Export to .docx, .odt, .pdf

Try Docs

Experience Docs instantly - no installation required.

Self-hosting

Docs supports Kubernetes, Docker Compose, and community-provided methods such as Nix and YunoHost.

Get started with self-hosting: Installation guide

Warning

Some advanced features (for example: Export as PDF) rely on XL packages from Blocknote. These packages are licensed under GPL and are not MIT-compatible

You can run Docs without these packages by building with:

PUBLISH_AS_MIT=true

This builds an image of Docs without non-MIT features.

More details can be found in environment variables

Local Development (for contributors)

Run Docs locally for development and testing.

Warning

This setup is intended for development and testing only. It uses Minio as an S3-compatible storage backend, but any S3-compatible service can be used.

Prerequisites

  • Docker
  • Docker Compose
  • GNU Make

Verify installation:

docker -v
docker compose version

If you encounter permission errors, you may need to use sudo, or add your user to the docker group.

Bootstrap the project

The easiest way to start is using GNU Make:

make bootstrap FLUSH_ARGS='--no-input'

This builds the app-dev and frontend-dev containers, installs dependencies, runs database migrations, and compiles translations.

It is recommended to run this command after pulling new code.

Start services:

make run

Open https://localhost:3000

Default credentials (development only):

username: impress
password: impress

Frontend development mode

For frontend work, running outside Docker is often more convenient:

make frontend-development-install
make run-frontend-development

Backend only

Starting all services except the frontend container:

make run-backend

Tests & Linting

make frontend-test
make frontend-lint

Backend tests can be run without docker. This is useful to configure PyCharm or VSCode to do it. Removing docker for testing requires to overwrite some URL and port values that are different in and out of Docker. env.d/development/common contains all variables, some of them having to be overwritten by those in env.d/development/common.test.

Demo content

Create a basic demo site:

make demo

More Make targets

To check all available Make rules:

make help

Django admin

Create a superuser:

make superuser

Admin UI: http://localhost:8071/admin

from  https://github.com/suitenumerique/docs

-----

 Docs(https://github.com/suitenumerique/docs)这个项目我一直都在关注,奈何之前的部署方式只支持k8s,如果只是为了部署一个笔记软件去搭一个k8s的话,那真的是有点拿大炮打蚊子那味了= =最近发现这个项目支持用docker compose部署了,遂记录下部署过程与遇到的一些问题。

不得不说国家队还是牛B!这个笔记软件第一次用就感觉挺顺手的,前端UI简洁大气,自带AI功能,可以帮你美化、改写、总结、修正错别字、翻译等。自托管的实例所有功能都能使用,与官方实例1:1还原,而不是像某些“开源笔记”那样吃相难看。

缺点也还是有的,没有十全十美的东西= =目前虽然支持docker compose部署了,但部署起来还是比较麻烦。另外我在使用中发现一些小bug,例如:上传的文件名不能包含中文,有中文就会导致上传失败。导出的PDF文件显示中文是乱码,且不支持代码块等。如果你不介意这些问题的话,可以尝试一下。

本文根据Docs官方的文档(https://github.com/suitenumerique/docs/blob/main/docs/installation/compose.md)编写,进行了一些修改:

1.将Keycloak更换为VoidAuth,因为Keycloak部署和配置都过于复杂。

2.将MinIO更换为Garage,因为开源的MinIO已经名存实亡了。

3.不使用官方的NGINX反向代理配置,因为我的服务器已经运行Ferron Web Server了。


Wednesday, 24 June 2026

react-drive-cms

 

Publish articles directly from Google Drive to your blog with React JS.

 

ReactDrive CMS v4.2.7, updated for 2022!

Publish articles directly from Google Drive to your blog with React JS. Serverless setup with no transpiling. In 2022, the setup has a couple extra steps, mostly because of changes with the third party services:

  • Google Spreadsheets API v3 has been discontinued and the update to the v4 requires the use of an API key that you need to configure in the Google Cloud Console
  • Sendgrid requires to create a verified sender account

Live demo here: http://misterfresh.github.io/react-drive-cms/

Features:

  • A dynamic site, but no backend to manage, no database, no server, no hosting & no maintenance (almost)
  • A MS Word-like and MS Excel-like interface that users are familiar with
  • Disqus comments system integration with React Hooks
  • SendGrid email forwarding integration so that you can receive messages from the contact form on your email address.
  • Regular URLs (no hashbang)
  • A simple blog starter kit that can be easily customized to your liking.

How to use:

  1. Connecting your React App to your Google Drive : follow this detailed step-by-step guide: https://github.com/misterfresh/react-drive-cms/blob/master/GUIDE.md

  2. In order for the contact form to work, publish the following script as a Google Web App: https://gist.github.com/misterfresh/b69d29a97cf415980be2 . In your "Visitors" Google spreadsheet, go to Tools>Script Editor. You can create a free SendGrid account and paste your SendGrid API key in the script. You will also need to have a verified sender email with SendGrid, and set that email in the "From" and "ReplyTo" fields in the script on lines 55 and 59. Save the script and click on Publish>Deploy as Web App.

  3. Fill in the correct values in ./conf.js :

    • "dashboardId" is the id of the "Dashboard" Google spreadsheet.
    • "sendContactMessageUrlId" is the id of the Google Web App script that does the email forwarding
    • "shortname" is the website's Disqus identifier
    • "root" is an optional url parameter, that would be the name of the project on GitHub pages.
  4. Push these changes to your forked repository on GitHub, go to your repo's Settings tab to publish it.

That's it!

7 years of ReactDrive CMS!

ReactDrive CMS was started in October 2015. The objective was to provide a free, most hassle-free way of hosting a basic dynamic website.

It uses Github Pages to host static assets, and uses React to generate the HTML on the client. The CMS part is handled using google Docs, and a google Spreadsheet is the "database". The contact form is the most complicated part : the form data will be sent to a public google apps script which will in turn write the visitor in the logbook spreadsheet and then post the form data to the sendgrid api, which will send an email to the site owner.

This setup has proven remarkably stable over the years, requiring only minor changes every 3 years or so to stay online, and having zero operating costs.

It has evolved with React patterns, starting with Browserify and Gulp and then later using Redux, and now switching to React Hooks and using Preact and htm library under the hood to avoid transpiling the code.

How to customize, no tools required:

From a terminal, run:

npm run start

This will start the local server. Open http://localhost:8080/ in your favorite browser.

from  https://github.com/misterfresh/react-drive-cms

Saturday, 6 June 2026

full-stack-fastapi-template

 Full stack, modern web application template. Using FastAPI, React, SQLModel, PostgreSQL, Docker, GitHub Actions, automatic HTTPS and more. 

 

Full Stack FastAPI Template

Test Docker Compose Test Backend Coverage

Technology Stack and Features

  • FastAPI for the Python backend API.
    • 🧰 SQLModel for the Python SQL database interactions (ORM).
    • 🔍 Pydantic, used by FastAPI, for the data validation and settings management.
    • 💾 PostgreSQL as the SQL database.
  • 🚀 React for the frontend.
    • 💃 Using TypeScript, hooks, Vite, and other parts of a modern frontend stack.
    • 🎨 Tailwind CSS and shadcn/ui for the frontend components.
    • 🤖 An automatically generated frontend client.
    • 🧪 Playwright for End-to-End testing.
    • 🦇 Dark mode support.
  • 🐋 Docker Compose for development and production.
  • 🔒 Secure password hashing by default.
  • 🔑 JWT (JSON Web Token) authentication.
  • 📫 Email based password recovery.
  • 📬 Mailcatcher for local email testing during development.
  • ✅ Tests with Pytest.
  • 📞 Traefik as a reverse proxy / load balancer.
  • 🚢 Deployment instructions using Docker Compose, including how to set up a frontend Traefik proxy to handle automatic HTTPS certificates.
  • 🏭 CI (continuous integration) and CD (continuous deployment) based on GitHub Actions.

Dashboard Login

API docs

Dashboard - Admin

API docs

Dashboard - Items

API docs

Dashboard - Dark Mode

API docs

Interactive API Documentation

API docs

How To Use It

You can just fork or clone this repository and use it as is.

✨ It just works. ✨

How to Use a Private Repository

If you want to have a private repository, GitHub won't allow you to simply fork it as it doesn't allow changing the visibility of forks.

But you can do the following:

  • Create a new GitHub repo, for example my-full-stack.
  • Clone this repository manually, set the name with the name of the project you want to use, for example my-full-stack:
git clone git@github.com:fastapi/full-stack-fastapi-template.git my-full-stack
  • Enter into the new directory:
cd my-full-stack
  • Set the new origin to your new repository, copy it from the GitHub interface, for example:
git remote set-url origin git@github.com:octocat/my-full-stack.git
  • Add this repo as another "remote" to allow you to get updates later:
git remote add upstream git@github.com:fastapi/full-stack-fastapi-template.git
  • Push the code to your new repository:
git push -u origin master

Update From the Original Template

After cloning the repository, and after doing changes, you might want to get the latest changes from this original template.

  • Make sure you added the original repository as a remote, you can check it with:
git remote -v

origin    git@github.com:octocat/my-full-stack.git (fetch)
origin    git@github.com:octocat/my-full-stack.git (push)
upstream    git@github.com:fastapi/full-stack-fastapi-template.git (fetch)
upstream    git@github.com:fastapi/full-stack-fastapi-template.git (push)
  • Pull the latest changes without merging:
git pull --no-commit upstream master

This will download the latest changes from this template without committing them, that way you can check everything is right before committing.

  • If there are conflicts, solve them in your editor.

  • Once you are done, commit the changes:

git merge --continue

Configure

You can then update configs in the .env files to customize your configurations.

Before deploying it, make sure you change at least the values for:

  • SECRET_KEY
  • FIRST_SUPERUSER_PASSWORD
  • POSTGRES_PASSWORD

You can (and should) pass these as environment variables from secrets.

Read the deployment.md docs for more details.

Generate Secret Keys

Some environment variables in the .env file have a default value of changethis.

You have to change them with a secret key, to generate secret keys you can run the following command:

python -c "import secrets; print(secrets.token_urlsafe(32))"

Copy the content and use that as password / secret key. And run that again to generate another secure key.

How To Use It - Alternative With Copier

This repository also supports generating a new project using Copier.

It will copy all the files, ask you configuration questions, and update the .env files with your answers.

Install Copier

You can install Copier with:

pip install copier

Or better, if you have pipx, you can run it with:

pipx install copier

Note: If you have pipx, installing copier is optional, you could run it directly.

Generate a Project With Copier

Decide a name for your new project's directory, you will use it below. For example, my-awesome-project.

Go to the directory that will be the parent of your project, and run the command with your project's name:

copier copy https://github.com/fastapi/full-stack-fastapi-template my-awesome-project --trust

If you have pipx and you didn't install copier, you can run it directly:

pipx run copier copy https://github.com/fastapi/full-stack-fastapi-template my-awesome-project --trust

Note the --trust option is necessary to be able to execute a post-creation script that updates your .env files.

Input Variables

Copier will ask you for some data, you might want to have at hand before generating the project.

But don't worry, you can just update any of that in the .env files afterwards.

The input variables, with their default values (some auto generated) are:

  • project_name: (default: "FastAPI Project") The name of the project, shown to API users (in .env).
  • stack_name: (default: "fastapi-project") The name of the stack used for Docker Compose labels and project name (no spaces, no periods) (in .env).
  • secret_key: (default: "changethis") The secret key for the project, used for security, stored in .env, you can generate one with the method above.
  • first_superuser: (default: "admin@example.com") The email of the first superuser (in .env).
  • first_superuser_password: (default: "changethis") The password of the first superuser (in .env).
  • smtp_host: (default: "") The SMTP server host to send emails, you can set it later in .env.
  • smtp_user: (default: "") The SMTP server user to send emails, you can set it later in .env.
  • smtp_password: (default: "") The SMTP server password to send emails, you can set it later in .env.
  • emails_from_email: (default: "info@example.com") The email account to send emails from, you can set it later in .env.
  • postgres_password: (default: "changethis") The password for the PostgreSQL database, stored in .env, you can generate one with the method above.
  • sentry_dsn: (default: "") The DSN for Sentry, if you are using it, you can set it later in .env.

Backend Development

Backend docs: backend/README.md.

Frontend Development

Frontend docs: frontend/README.md.

Deployment

Deployment docs: deployment.md.

Development

General development docs: development.md.

This includes using Docker Compose, custom local domains, .env configurations, etc.

Release Notes

Check the file release-notes.md.

from  https://github.com/fastapi/full-stack-fastapi-template

Friday, 5 June 2026

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React



With Expo tools, services, and React, you can build, deploy, and quickly iterate on native Android, iOS, and web apps from the same JavaScript codebase.

    Access to device capabilities like camera, location, notifications, sensors, haptics, and much more, all with universal APIs.

    Build service gives you app-store ready binaries and handles certificates, no need for you to touch Xcode or Android Studio.

    Over-the-air updates let you update your app at any time without the hassle and delays of submitting to the store.

Quick Start

If you are already experienced with React and JavaScript tooling and want to dive right in and figure things out as you go, this is the quickest way to get started:

$ npm install -g expo-cli
$ expo init my-project
$ cd my-project
$ expo start

Wednesday, 29 April 2026

ssr

 

A most advanced ssr framework support React17/React18/Vue2/Vue3 on Earth that implemented serverless-side render specification.

 
A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server.


Version 7.x

The ssr framework version 7.x has been released. Read the documentation for more detailed introduction and upgrade guide. Version 7 brings the following new features:

  • Supports Rspack, Rolldown-Vite, and Webpack build tools to greatly improve build performance.
  • Supports any frontend framework combined with any build tool
  • Brand new dependency design, streamlined dependencies required for initialization
  • Progressive upgrade with almost no breaking changes, v6 projects can smoothly transition to v7

Version 7 has been tested to improve build speed by 5-10 times. Dependency size reduced by 2/3 (when using Rspack|Rolldown-Vite scenarios).

Use the latest create-ssr-app to initialize v7 (recommended) or v6 project templates according to prompts.

$ npm init ssr-app@latest my-ssr-project

Introduction

The ssr framework is an out-of-the-box server-side rendering framework built for frontend frameworks in server-side rendering scenarios. To understand what server-side rendering is, please check the documentation.

This framework evolved from the egg-react-ssr project and ssr v4 version (midway-faas + react ssr). Based on previous foundations, it has made many improvements through plugin-based code organization, supporting the combination of any server-side framework with any frontend framework. Developers can choose to deploy via Serverless or deploy as traditional Node.js applications. We focus on improving the development experience of server-side rendering applications in Serverless scenarios, creating one-stop development and application deployment services. This maximizes developer experience while minimizing application development and deployment costs.

In the latest version, it supports React17/18/19 and Vue2/Vue3 as frontend frameworks for server-side rendering. For development tools, we support both Vite|Webpack|Rspack to improve application startup speed, build speed, and HMR speed.

In the Node.js framework, the official default example provides integration examples based on Nest.js and Midway.js, two popular Node.js frameworks with the ssr framework. Of course, the ssr framework is designed not to be coupled with any Node.js framework, and developers can freely choose to use any Node.js framework.

If you choose Midway.js as your Node.js framework, you can directly use the built-in ssr deploy command to deploy applications to Alibaba Cloud or Tencent Cloud platforms with one click.

Read our official documentation for more detailed understanding. In fact, the documentation itself is developed using the ssr framework and deployed to Alibaba Cloud Serverless service.

When Should You Choose the SSR Framework

  • Need to use in scenarios combining Node.js with frontend frameworks. Unlike other pure frontend frameworks, the ssr framework is specifically built for server-side rendering scenarios or scenarios combining Node.js with frontend.
  • Need an out-of-the-box server-side rendering capability without manually combining different frontend frameworks with server-side frameworks.
  • Need framework-level rendering degradation capability that automatically degrades to client-side rendering when server-side rendering fails.
  • Need a framework with simple configuration and clear logic. The ssr framework has the clearest rendering logic and application build logic among similar frameworks.
  • May change technology stacks, such as upgrading from Vue2 to Vue3, downgrading from Vue3 to Vue2, or switching between React/Vue.
  • Need out-of-the-box support for popular UI libraries like antd and vant in server-side rendering scenarios.
  • Need to support both Webpack and Vite development tools to get fast startup speed, HMR speed, and stable production code.
  • Need to use pinia as data management solution in Vue3 SSR.
  • Simply need a faster and better cra or vue-cli. The ssr framework also provides excellent support in pure csr scenarios.

Who's Using

Companies (applications) currently using this project. If you are using it but not listed, please raise an issue. We welcome promotion and sharing, and will provide technical support at any time.


优酷视频

微信公众平台

腾讯体育

QQ会员

腾讯视频
牛牛搭
牛牛搭

国盛证券
三易科技
三易科技

腾讯微卡
腾讯手游助手
腾讯手游助手
国家现代农业科技创新中心
国家现代农业科技创新中心

部署于阿里云示例应用

部署于腾讯云示例应用

100教育
Dream2qBlog
个人博客
Dream2qBlog
得物
微脉
微脉
行动教育
行动教育
Happy
HappyPC
Happy
HappyMobile

阿里影业娱乐宝
vmate 积分商城
Vmate短视频
火炽星原CRM
火炽星原CRM

拍信创意
极速二维码
极速二维码
cvte
希沃帮助中心
经传多赢股票网
经传多赢股票网
中商全球图书采选平台
中商全球图书采选平台

Features

  • 🌱 Extremely customizable: Frontend supports modern Web frameworks like React17/React18/Vue2/Vue3;
  • 🚀 Ready to use: Built-in 10+ scaffold extensions like Pinia, antd, vant, TypeScript, Hooks, etc.;
  • 🧲 Plugin-driven: Based on plugin architecture, users focus more on business logic;
  • 💯 Serverless-first: One-click deployment to various Serverless platforms, also supports traditional Web Servers like Egg, Midway, Nest, etc.
  • 🛡 High availability scenarios, seamless degradation from SSR to CSR, best disaster recovery solution.
  • 😄 Feature-rich, build tools support both Webpack/Vite, supports four rendering modes SSR|CSR|SSG|Html
  • ✨ Supports bun as js runtime

Implemented Features

🚀 indicates implemented features

Milestone Status
Support combination of any server-side framework with any frontend framework. (Serverless/Midway/NestJS) + (React17/React18/Vue2/Vue3) 🚀
Smoothest vite support 🚀
Minimal and elegant server-side rendering implementation 🚀
Support pre-rendering capability 🚀
Optimized production code bundle size for Serverless scenarios with strict code package size limitations 🚀
Support both conventional frontend routing and declarative frontend routing 🚀
Abandon traditional template engines, all page elements unified using frontend components as DSL 🚀
Support four rendering modes simultaneously, providing one-click degradation from server-side rendering to client-side rendering 🚀
Unify data fetching methods for different frameworks on server and client sides, achieving high reusability 🚀
Type-friendly, fully embrace TypeScript 🚀
Support seamless integration with antd vant without modifying any configuration 🚀
Support using less as CSS preprocessor 🚀
Seamless usage in micro-frontend scenarios 🚀
Support using context or valtio for minimalist data management solutions, abandoning traditional redux/dva data management solutions 🚀
Vue3 scenarios provide Pinia and Provide/Inject to replace Vuex for cross-component communication 🚀
Support creation and usage on Alibaba Cloud platform 🚀
ssr deploy one-click deployment to Alibaba Cloud platform 🚀
ssr deploy --tencent one-click deployment to Tencent Cloud platform without modifying any configuration 🚀

Solution Comparison

Why choose the ssr framework and comparison with similar frameworks, please check the documentation

Quick Start

We provide the create-ssr-app scaffold to let users quickly create different types of applications.

Currently, the official provides the following types of templates for developers to use directly. Users can choose different templates for development based on their actual technology stack.

Although the technology stacks are different, the development philosophy is consistent. In any technology stack combination, our development commands, build commands, and rendering principles are completely consistent.

Note: In Midway.js and Nest.js scenarios, we have implemented one-click deployment to Serverless platforms. However, the underlying implementations differ slightly. For more detailed introduction, please read the Serverless chapter. If you need to extensively use capabilities provided by Serverless platforms, we recommend creating Midway.js type applications. We strongly recommend reading our official documentation for more detailed understanding.

Developers can create different types of applications according to their actual technology stack needs to get started quickly.

Create Project

Through the npm init command, we can create any of the above templates:

$ npm init ssr-app my-ssr-project
$ cd my-ssr-project
$ yarn # recommend using yarn, can also use npm install
$ yarn start
$ open http://localhost:3000 # access the application
$ yarn build # resource build, equivalent to npx ssr build
$ yarn start:vite # start in vite mode, equivalent to npx ssr start --tools vite

Live Examples

Preview application details deployed to Alibaba Cloud/Tencent Cloud services through Serverless one-click deployment by visiting the following links. Use queryParams csr=true to degrade SSR server-side rendering mode to CSR client-side rendering mode with one click, or configure through config.js.

Ecosystem

Project Status Description
ssr ssr-status cli for ssr framework
ssr-core ssr-core-status core render for all framwork
ssr-plugin-midway ssr-plugin-midway-status provide start and build fetature by midway@2.0
ssr-plugin-nestjs ssr-plugin-nestjs-status provide start and build feature by NestJS
ssr-plugin-react ssr-plugin-react-status develop react application only be used in development
ssr-plugin-vue ssr-plugin-vue-status develop vue2 application only be used in development
ssr-plugin-vue3 ssr-plugin-vue3-status develop vue3 application only be used in development
ssr-common-utils ssr-common-utils-status common utils in Node.js environment and browser
ssr-hoc-react ssr-hoc-react-status provide hoc component for react
ssr-hoc-vue3 ssr-hoc-vue3-status provide hoc component for vue3
ssr-types ssr-types-status provide common types
ssr-webpack ssr-webpack-status start local server and build production bundle by webpack
from  https://github.com/zhangyuang/ssr