FROM node:lts-bullseye

# Default working dir
WORKDIR /opt/node_app


# Get apt up and running
RUN apt update 
RUN apt install git yarn -y

# Create a React 
RUN npx create-react-app my-excalidraw-app

# Change to the newly created directory
WORKDIR /opt/node_app/my-excalidraw-app

# Install and add options / app
RUN yarn add react react-dom @excalidraw/excalidraw


# Replace the content of src/App.js
RUN echo "import React from 'react';" > src/App.js \
&& echo "import Excalidraw from '@excalidraw/excalidraw';" >> src/App.js \
&& echo "import './App.css';" >> src/App.js \
&& echo "function App() {" >> src/App.js \
&& echo "  return (" >> src/App.js \
&& echo "    <div className='App'>" >> src/App.js \
&& echo "      <Excalidraw />" >> src/App.js \
&& echo "    </div>" >> src/App.js \
&& echo "  );" >> src/App.js \
&& echo "}" >> src/App.js \
&& echo "export default App;" >> src/App.js

# Make port 3000 available outside the container
EXPOSE 3000

# Start the development server
CMD ["yarn", "start"]