Online Code Editor
A full stack web application for online programming, built with React(Frontend) and Express(Backend).
Function
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.
Technology
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
Demo
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!
Setup Locally
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!
Deployment
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).
Steps(Updated on July 18, 2021)
Manually deploy the same git repo to two apps in heroku. Use Multi Procfile buildpack
to deploy multiple apps in a monorepo.
Server
Create app code-editor-api
for backend api.
cd code-editor-react
heroku login
heroku create -a code-editor-api
heroku buildpacks:add -a code-editor-api heroku-community/multi-procfile
heroku buildpacks:add -a code-editor-api heroku/nodejs
heroku config:set -a code-editor-api PROCFILE=src/server/Procfile
git push https://git.heroku.com/code-editor-api.git HEAD:master
Client
Create app code-editor-react
for client website.
cd code-editor-react
heroku login
heroku create -a code-editor-react
heroku buildpacks:add -a code-editor-react heroku-community/multi-procfile
heroku buildpacks:add -a code-editor-react heroku/nodejs
heroku config:set -a code-editor-react PROCFILE=Procfile
git push https://git.heroku.com/code-editor-react.git HEAD:master
Update
Server.
cd code-editor-react
heroku login
heroku git:remote -a code-editor-api
git commit --allow-empty -m "Upgrading to heroku-20"
git push heroku master
Client.
cd code-editor-react
heroku login
heroku git:remote -a code-editor-react
git commit --allow-empty -m "Upgrading to heroku-20"
git push heroku master
Portfolio
Read portfolio Code Editor(React) to learn the main functions of this code editor.
Tutorial
Read tutorial Building Online Code Editor with React and Express to learn how this online code editor is built.
Docker
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.