node --version
npm --version
npx --version
docker
docker-compose
mkdir [app_name]
, and go to that directory with cd [app_name]
.
First, let’s set up the Express backend. Create a new folder called server with
mkdir server
, and go to that directory with cd server
.
In the server folder, run the following commands:
npm init
npm install express
app.js
and add the
following code:
Dockerfile
in the server
folder with the following
code:
cd ..
.
In the root folder, run the following command npx create-react-app client
.
This will create your React app. Once the installation has finished, cd into the
directory with cd client
.NewTabIcon
Once in the client, create a file called Dockerfile
with the following
contents:
client/src/App.js
to the following:
client/package.json
by adding the following line
"proxy": "http://localhost:5001",
.
cd ..
. Once in
the root folder, create a docker-compose.yml
file with the following content:
docker-compose up
to
start your application.
node --version
npm --version
npx --version
docker
docker-compose
mkdir [app_name]
cd [app_name]
mkdir server
cd server
/server/app.js
file and add content above.
/server/Dockerfile
file and add content above.
cd . .
npx create-react-app client
cd client
/client/Dockerfile
file and add the content above.
/client/src/App.js
file to the content above.
/client/src/package.json
file to the content above.
cd ..
/docker-compose.yml
file and add the content above.
docker-compose up
FROM vm/ubuntu:18.04
FROM
line, and in this case we’re
using the ubuntu:18.04
virtual machine image.
If you’re familiar with AWS Ec2 Instances, this is similar to creating a virtual
machine from the ubuntu 18.04 image.
MEMORY 2G
MEMORY 2G
to ensure that at
least 2GB of memory are available.
RUN
command to install the dependencies we need to build and run the React
application.
In this case we’re using the RUN
instruction to download Docker.
RUN curl -L https://github.com/docker/compose/releases/download/1.29.2/docker-compose-'uname -s'-'uname -m' -o /usr/local/bin/docker-compose
RUN chmod +x /usr/local/bin/docker-compose
Similar to the RUN
commands above, this will execute the given script, which
will install docker compose on the virtual machine so we can run
docker-compose up
.
RUN curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
RUN sudo apt-get install -y nodejs
RUN sudo npm install npm@latest -g
Similar to the RUN
commands above, this will execute the given scripts to
install Node JS and npm which are both needed for React.
ENV NODE_OPTIONS=--max-old-space-size=8192
The instruction persistently sets environment
variables in the Layerfile. In this case, the NODE_OPTIONS
gets set to a
specific size so that it can be consumed later in the React start process.
RUN docker-compose --version
This RUN
instruction step is not needed, however we’re adding it here to check
if the virtual machine installed Docker Compose successfully.
COPY . .
The COPY
instruction moves files from your
repository to the virtual machine. The Layerfile will pick up on the files in
the repository that you are making the commit for, and will copy those files
into the virtual machine so you can run you project.
WORKDIR client
RUN npm install
The RUN
instruction instruction changes the
location from which files are resolved in the runner.
WORKDIR /root/server
RUN npm install
Similar to the instruction above, these steps navigate to the Server folder and
add all the dependencies needed.
RUN docker-compose up -d
After installing all dependencies we run docker-compose up -d
to start our
React and Server applications.
EXPOSE WEBSITE http://localhost:5001 /api
The EXPOSE WEBSITE
instruction
creates a link to view the virtual machine at a specific port. We use
EXPOSE WEBSITE
to expose the virtual machine on port 3000 which is where the
React application runs after running npm start
. We use EXPOSE WEBSITE
here
so we can get a link to our React app to share with stakeholders involved in our
projects.
This line is especially important since all requests to the /api
endpoint will
hit our server running on port:5001
.
EXPOSE WEBSITE http://localhost:3000 /
Similar to the instruction above EXPOSE CLIENT
exposes the preview environment
at port 3000. After expose, you can head to the preview environment link to see
it in action.
This line is especially important since all requests to the /api
endpoint will
hit our server running on port:5001
.
Layerfile
(no file extension) in the root of your React
application. If you haven’t already, install webapp.io onto your repository
containing your full-stack app. Once done, simply create a commit and push your
React app to the repository with the new Layerfile. Webapp.io will pick up on
the Layerfile and build your application according to the steps in your
Layerfile.