Create Cloudflare App

screenshot of Create Cloudflare App

Cloudflare Apps boilerplate featuring Workers and DNS powered by Webpack and Babel

Overview:

Cloudflare App is a starter project that allows users to build apps using the latest ES features, with the help of Babel, ESLint, and Prettier. With this app, users can configure the DNS Records of any domain on Cloudflare.

Features:

  • Cloudflare DNS: The app enables users to configure the DNS Records of any domain on Cloudflare.
  • Setup: Users can fork and clone the repository or download the latest release to get started.
  • Installation: Users need to install the dependencies using yarn install and then build the project using yarn build (or npm run build).
  • App Creator: Users can upload their project directory to the App Creator, which automatically updates on file changes. Once testing is complete, users can press Create App to submit the app for moderation.
  • Usage: Users can start their development environment and run Webpack in watch mode using yarn start (or npm start). They can also lint their project and compile the JavaScript and CSS once for release using yarn build (or npm run build).
  • Other Interesting Scripts: Users can add other initialization scripts to their development pipeline using dev:setup. The project uses yarn-run-all, making it easy to run tasks in series or parallel using yarn or npm.
  • Details: The installer options for the app are added in the install.json file. Users can configure Cloudflare DNS Records using the DNS field. They can start building their app in src/index.js and add styles in src/styles.css. Media files for the app can be stored in the media/ directory. The webpack.config.js file provides a simple Webpack 4 config with Babel and CSS Loader. Users are advised not to modify the config for minification purposes.
  • Troubleshooting: Users can refer to the Cloudflare developer documentation for examples and API usage.

Summary:

Cloudflare App is a starter project that allows users to build apps with the latest ES features using Babel, ESLint, and Prettier. It provides features such as Cloudflare DNS configuration and an App Creator for easy development and testing. The installation process involves forking or cloning the repository, installing dependencies, and building the project. Users can refer to the Cloudflare developer documentation for troubleshooting and additional information.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.