Code Preview App
This is a Code Preview app built with React, Redux, Node.js, esbuild, TypeScript, and managed using Lerna.
Table of Contents
Installation
To install the app and its dependencies, run the following commands:
npm install npm run bootstrap
This will install the dependencies for the main project as well as for the three packages: local-client, local-api, and cli.
Usage
To start the Code Preview app, run the following command from the root directory:
npm start
This will start the local-client and local-api packages, which are responsible for serving the front-end and back-end of the app, respectively. The app will be available at http://localhost:3000.
To use the cli package, run the following command from the root directory:
npm run cli
This will start the CLI tool for the app, which allows you to perform various operations such as saving and loading code snippets.
if node < 16 NODE_OPTIONS=--openssl-legacy-provider
Features
The Code Preview app allows you to enter HTML, CSS, and JavaScript code and preview the result in real-time. Some of the key features of the app include:
- Real-time code preview
- Syntax highlighting for HTML, CSS, and JavaScript code
- Automatic code compilation using esbuild
- Support for TypeScript
- Ability to save and load code snippets
- Built with React and Redux for a fast and responsive user interface
- Runs on Node.js for easy deployment and scalability
- Managed using Lerna for easy package management and versioning
Project Structure
The Code Preview app is divided into three packages, each of which has its own package.json file and node_modules directory:
-
local-client: This package contains the front-end code for the app, built with React and Redux. -
local-api: This package contains the back-end code for the app, built with Node.js and Express. -
cli: This package contains a CLI tool for the app, built with TypeScript and Node.js.
The main project also has its own package.json file, which manages the dependencies and scripts for the entire app.
Contributing
Contributions to the Code Preview app are welcome! To contribute, fork the repository and create a new branch for your feature or bug fix. Then submit a pull request and we'll review your changes.