chore: add proxy backend (#3126)
* feat(backends): add proxy backend * feat: add proxy server initial commit * fix: move from joi to @hapi/joi * test: add joi validation tests * feat: proxy server initial implementations * test: add tests, fix build * chore: update yarn.lock * build: fix develop command * fix(back-proxy): fix bugs * test(backend-proxy): add cypress tests * chore: cleanup * chore: support node 10 * chore: code cleanup * chore: run cypress on ubuntu 16.04 * test(e2e): fix proxy backend cypress tests * chore: don't start proxy server on yarn develop
This commit is contained in:
committed by
Shawn Erquhart
parent
cf57da223d
commit
7e8084be87
11
packages/netlify-cms-backend-proxy/README.md
Normal file
11
packages/netlify-cms-backend-proxy/README.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Docs coming soon!
|
||||
|
||||
Netlify CMS was recently converted from a single npm package to a "monorepo" of over 20 packages.
|
||||
That's over 20 Readme's! We haven't created one for this package yet, but we will soon.
|
||||
|
||||
In the meantime, you can:
|
||||
|
||||
1. Check out the [main readme](https://github.com/netlify/netlify-cms/#readme) or the [documentation
|
||||
site](https://www.netlifycms.org) for more info.
|
||||
2. Reach out to the [community chat](https://netlifycms.org/chat/) if you need help.
|
||||
3. Help out and [write the readme yourself](https://github.com/netlify/netlify-cms/edit/master/packages/netlify-cms-backend-proxy/README.md)!
|
29
packages/netlify-cms-backend-proxy/package.json
Normal file
29
packages/netlify-cms-backend-proxy/package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "netlify-cms-backend-proxy",
|
||||
"description": "Proxy backend for Netlify CMS",
|
||||
"version": "1.0.1",
|
||||
"repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-proxy",
|
||||
"bugs": "https://github.com/netlify/netlify-cms/issues",
|
||||
"license": "MIT",
|
||||
"module": "dist/esm/index.js",
|
||||
"main": "dist/netlify-cms-backend-proxy.js",
|
||||
"keywords": [
|
||||
"netlify",
|
||||
"netlify-cms",
|
||||
"backend"
|
||||
],
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"develop": "yarn build:esm --watch",
|
||||
"build": "cross-env NODE_ENV=production webpack",
|
||||
"build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\""
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/core": "^10.0.9",
|
||||
"@emotion/styled": "^10.0.9",
|
||||
"netlify-cms-lib-util": "^2.3.0",
|
||||
"netlify-cms-ui-default": "^2.6.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4"
|
||||
}
|
||||
}
|
61
packages/netlify-cms-backend-proxy/src/AuthenticationPage.js
Normal file
61
packages/netlify-cms-backend-proxy/src/AuthenticationPage.js
Normal file
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from '@emotion/styled';
|
||||
import { Icon, buttons, shadows, GoBackButton } from 'netlify-cms-ui-default';
|
||||
|
||||
const StyledAuthenticationPage = styled.section`
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const PageLogoIcon = styled(Icon)`
|
||||
color: #c4c6d2;
|
||||
margin-top: -300px;
|
||||
`;
|
||||
|
||||
const LoginButton = styled.button`
|
||||
${buttons.button};
|
||||
${shadows.dropDeep};
|
||||
${buttons.default};
|
||||
${buttons.gray};
|
||||
|
||||
padding: 0 30px;
|
||||
margin-top: -40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
${Icon} {
|
||||
margin-right: 18px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default class AuthenticationPage extends React.Component {
|
||||
static propTypes = {
|
||||
onLogin: PropTypes.func.isRequired,
|
||||
inProgress: PropTypes.bool,
|
||||
config: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
handleLogin = e => {
|
||||
e.preventDefault();
|
||||
this.props.onLogin(this.state);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { config, inProgress } = this.props;
|
||||
|
||||
return (
|
||||
<StyledAuthenticationPage>
|
||||
<PageLogoIcon size="300px" type="netlify-cms" />
|
||||
<LoginButton disabled={inProgress} onClick={this.handleLogin}>
|
||||
{inProgress ? 'Logging in...' : 'Login'}
|
||||
</LoginButton>
|
||||
{config.site_url && <GoBackButton href={config.site_url}></GoBackButton>}
|
||||
</StyledAuthenticationPage>
|
||||
);
|
||||
}
|
||||
}
|
215
packages/netlify-cms-backend-proxy/src/implementation.ts
Normal file
215
packages/netlify-cms-backend-proxy/src/implementation.ts
Normal file
@ -0,0 +1,215 @@
|
||||
import {
|
||||
Entry,
|
||||
AssetProxy,
|
||||
PersistOptions,
|
||||
User,
|
||||
Config,
|
||||
Implementation,
|
||||
ImplementationFile,
|
||||
EditorialWorkflowError,
|
||||
APIError,
|
||||
} from 'netlify-cms-lib-util';
|
||||
import AuthenticationPage from './AuthenticationPage';
|
||||
|
||||
const serializeAsset = async (assetProxy: AssetProxy) => {
|
||||
const base64content = await assetProxy.toBase64!();
|
||||
|
||||
return { path: assetProxy.path, content: base64content, encoding: 'base64' };
|
||||
};
|
||||
|
||||
type MediaFile = {
|
||||
id: string;
|
||||
content: string;
|
||||
encoding: string;
|
||||
name: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
const deserializeMediaFile = ({ id, content, encoding, path, name }: MediaFile) => {
|
||||
let byteArray = new Uint8Array(0);
|
||||
if (encoding !== 'base64') {
|
||||
console.error(`Unsupported encoding '${encoding}' for file '${path}'`);
|
||||
} else {
|
||||
const decodedContent = atob(content);
|
||||
byteArray = new Uint8Array(decodedContent.length);
|
||||
for (let i = 0; i < decodedContent.length; i++) {
|
||||
byteArray[i] = decodedContent.charCodeAt(i);
|
||||
}
|
||||
}
|
||||
const file = new File([byteArray], name);
|
||||
const url = URL.createObjectURL(file);
|
||||
return { id, name, path, file, size: file.size, url, displayURL: url };
|
||||
};
|
||||
|
||||
export default class ProxyBackend implements Implementation {
|
||||
proxyUrl: string;
|
||||
mediaFolder: string;
|
||||
options: { initialWorkflowStatus?: string };
|
||||
branch: string;
|
||||
|
||||
constructor(config: Config, options = {}) {
|
||||
if (!config.backend.proxy_url) {
|
||||
throw new Error('The Proxy backend needs a "proxy_url" in the backend configuration.');
|
||||
}
|
||||
|
||||
this.branch = config.backend.branch || 'master';
|
||||
this.proxyUrl = config.backend.proxy_url;
|
||||
this.mediaFolder = config.media_folder;
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
authComponent() {
|
||||
return AuthenticationPage;
|
||||
}
|
||||
|
||||
restoreUser() {
|
||||
return this.authenticate();
|
||||
}
|
||||
|
||||
authenticate() {
|
||||
return (Promise.resolve() as unknown) as Promise<User>;
|
||||
}
|
||||
|
||||
logout() {
|
||||
return null;
|
||||
}
|
||||
|
||||
getToken() {
|
||||
return Promise.resolve('');
|
||||
}
|
||||
|
||||
async request(payload: { action: string; params: Record<string, unknown> }) {
|
||||
const response = await fetch(this.proxyUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json; charset=utf-8' },
|
||||
body: JSON.stringify({ branch: this.branch, ...payload }),
|
||||
});
|
||||
|
||||
const json = await response.json();
|
||||
if (response.ok) {
|
||||
return json;
|
||||
} else {
|
||||
throw new APIError(json.message, response.status, 'Proxy');
|
||||
}
|
||||
}
|
||||
|
||||
entriesByFolder(folder: string, extension: string, depth: number) {
|
||||
return this.request({
|
||||
action: 'entriesByFolder',
|
||||
params: { branch: this.branch, folder, extension, depth },
|
||||
});
|
||||
}
|
||||
|
||||
entriesByFiles(files: ImplementationFile[]) {
|
||||
return this.request({
|
||||
action: 'entriesByFiles',
|
||||
params: { branch: this.branch, files },
|
||||
});
|
||||
}
|
||||
|
||||
getEntry(path: string) {
|
||||
return this.request({
|
||||
action: 'getEntry',
|
||||
params: { branch: this.branch, path },
|
||||
});
|
||||
}
|
||||
|
||||
unpublishedEntries() {
|
||||
return this.request({
|
||||
action: 'unpublishedEntries',
|
||||
params: { branch: this.branch },
|
||||
});
|
||||
}
|
||||
|
||||
async unpublishedEntry(collection: string, slug: string) {
|
||||
try {
|
||||
const entry = await this.request({
|
||||
action: 'unpublishedEntry',
|
||||
params: { branch: this.branch, collection, slug },
|
||||
});
|
||||
|
||||
const mediaFiles = entry.mediaFiles.map(deserializeMediaFile);
|
||||
return { ...entry, mediaFiles };
|
||||
} catch (e) {
|
||||
if (e.status === 404) {
|
||||
throw new EditorialWorkflowError('content is not under editorial workflow', true);
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
deleteUnpublishedEntry(collection: string, slug: string) {
|
||||
return this.request({
|
||||
action: 'deleteUnpublishedEntry',
|
||||
params: { branch: this.branch, collection, slug },
|
||||
});
|
||||
}
|
||||
|
||||
async persistEntry(entry: Entry, assetProxies: AssetProxy[], options: PersistOptions) {
|
||||
const assets = await Promise.all(assetProxies.map(serializeAsset));
|
||||
return this.request({
|
||||
action: 'persistEntry',
|
||||
params: {
|
||||
branch: this.branch,
|
||||
entry,
|
||||
assets,
|
||||
options: { ...options, status: options.status || this.options.initialWorkflowStatus },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
updateUnpublishedEntryStatus(collection: string, slug: string, newStatus: string) {
|
||||
return this.request({
|
||||
action: 'updateUnpublishedEntryStatus',
|
||||
params: { branch: this.branch, collection, slug, newStatus },
|
||||
});
|
||||
}
|
||||
|
||||
publishUnpublishedEntry(collection: string, slug: string) {
|
||||
return this.request({
|
||||
action: 'publishUnpublishedEntry',
|
||||
params: { branch: this.branch, collection, slug },
|
||||
});
|
||||
}
|
||||
|
||||
async getMedia(mediaFolder = this.mediaFolder) {
|
||||
const files: MediaFile[] = await this.request({
|
||||
action: 'getMedia',
|
||||
params: { branch: this.branch, mediaFolder },
|
||||
});
|
||||
|
||||
return files.map(deserializeMediaFile);
|
||||
}
|
||||
|
||||
async getMediaFile(path: string) {
|
||||
const file = await this.request({
|
||||
action: 'getMediaFile',
|
||||
params: { branch: this.branch, path },
|
||||
});
|
||||
return deserializeMediaFile(file);
|
||||
}
|
||||
|
||||
async persistMedia(assetProxy: AssetProxy, options: PersistOptions) {
|
||||
const asset = await serializeAsset(assetProxy);
|
||||
const file: MediaFile = await this.request({
|
||||
action: 'persistMedia',
|
||||
params: { branch: this.branch, asset, options: { commitMessage: options.commitMessage } },
|
||||
});
|
||||
|
||||
return deserializeMediaFile(file);
|
||||
}
|
||||
|
||||
deleteFile(path: string, commitMessage: string) {
|
||||
return this.request({
|
||||
action: 'deleteFile',
|
||||
params: { branch: this.branch, path, options: { commitMessage } },
|
||||
});
|
||||
}
|
||||
|
||||
getDeployPreview(collection: string, slug: string) {
|
||||
return this.request({
|
||||
action: 'getDeployPreview',
|
||||
params: { branch: this.branch, collection, slug },
|
||||
});
|
||||
}
|
||||
}
|
8
packages/netlify-cms-backend-proxy/src/index.ts
Normal file
8
packages/netlify-cms-backend-proxy/src/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import ProxyBackend from './implementation';
|
||||
import AuthenticationPage from './AuthenticationPage';
|
||||
|
||||
export const NetlifyCmsBackendProxy = {
|
||||
ProxyBackend,
|
||||
AuthenticationPage,
|
||||
};
|
||||
export { ProxyBackend, AuthenticationPage };
|
3
packages/netlify-cms-backend-proxy/webpack.config.js
Normal file
3
packages/netlify-cms-backend-proxy/webpack.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
const { getConfig } = require('../../scripts/webpack.js');
|
||||
|
||||
module.exports = getConfig();
|
Reference in New Issue
Block a user