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(前端程序)
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.
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.
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
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.
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.
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.
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:
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.
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.