A full stack web application for online programming, built with React(Frontend) and Express(Backend).

This application is used for online coding. After selecting the programming language, you can start to write code. Below are the highlighted features.

• Five programming languages are supported, including c, c++, java, javascript and python.
• Syntax highlighting for different languages.
• Compilation and execution are supported. The proper result or error message will be displayed.

The Server is built with Express. The used libraries for server are listed as follows.

• RESTful API: express, express router, cors
• Compilation & Execution: spawn in node.js

The Client is built with React and 3rd-party libraries, see below.

• Styling: bootstrap
• Rich Text Editor: react-ace

Two available demos:

• Live Demo on Heroku: https://code-editor-react.herokuapp.com/
• Live Demo on Netlify: https://code-editor-react.netlify.com/
• Live Demo on Azure: https://code-editor.azurewebsites.net/

Note: The demo websites may be slow when you access them for the first time. Be patient!

git clone https://github.com/jojozhuang/code-editor-react.git
cd code-editor-react
npm install
npm run dev

Access http://localhost:3000/ in web browser and click 'Code Editor' button, enjoy!

Follow tutorial Deploying Full Stack React App to Heroku to deploy the React app to Heroku(RESTful API + Frontend React).

Follow tutorial Continuously Deploy Full Stack React App to Heroku and Netlify with Travis-CI to continuously deploy this Full Stack app to Heroku(RESTful API) and Netlify(Frontend React).

Read portfolio Code Editor(React) to learn the main functions of this code editor.

Read tutorial Building Online Code Editor with React and Express to learn how this online code editor is built.

Build for production. All the compiled html files and js files will be generated in dist.

npm run build

Create image with nginx for frontend.

docker build -t jojozhuang/code-editor-web .

Create image with node for backend.

docker build -t jojozhuang/code-editor-server . -f Dockerfile-server

Create container.

docker run --name code-editor-web -p 9010:80 -d jojozhuang/code-editor-web
docker run --name code-editor-server -p 9011:80 -d jojozhuang/code-editor-server

Access http://192.168.0.2:9010/ in browser.