In addition, I followed the migration guide for using a CRA react app with NX. I followed the official instructions for installing a React application for NX. Here is also a small video showing steps 4-7: Make another change in the file (check while saving that in dev tools the head and body tags are NOT refreshed).Check that there is no new console statement reflecting the change.Change/add/delete a line in file "libs/app/core/src/lib/models/route-keys.ts" for enum RouteKeys and save (check while saving that in dev tools the head and body tags are refreshed).Open browser dev tools (preferable chrome) and select elements tab.Expected BehaviorĬhanging a file in a connected library results in refreshing the app and pushing all the changes to the running app in the browser. After the first change and save the changed enum is not logged to the console although the head and body tags are refreshed (short color flash in elements tab). In the example to reproduce the issue an enum (same while trying with an object) is logged to the console. After the second save/change the app in the browser is not refreshed.īut also after the first save the changes are not visible in the browser. Give it a few moments to complete this can be quick or slow depending on your system and internet connection.Changing a file in a connected library for an application, the changes are only pushed the first time to the running app. Now that we have the files docker will need to build and run let’s continue.Įnsure that your terminal is pointed inside the root folder of your react application and run the following command: docker compose up -build Building and running the react app with docker So, If we change something in our React app we would be able to see the live changes through Docker. This is a file watching mechanism that is used by create-react-app to watch for file changes. Notice the environment variable CHOKIDAR_USEPOLLING=true in the docker-compose file above. :/react-docker:delegated - /node_modules ports: - 3000:3000 environment: - CHOKIDAR_USEPOLLING=true Then give it the following content: # docker-compose.yml version: "3.8" services: frontend: build: context. Adding a docker-compose.yml fileĮnsure that your terminal is still pointed to your React app’s root folder and run the following command: toch docker-compose.yml # Add `/app/node_modules/.bin` to $PATH ENV PATH /app/node_modules/.bin:$PATH # Install dependencies RUN npm install # Deploy app for local development CMD npm start -host 0.0.0.0 -port 3000 -disableHostCheck true 2. Then open the Dockerfile in your code/ text editor and give it the following content: # Dockerfile # Pull the base image FROM node:13.12.0-alpine # Set the working directory WORKDIR /react-docker # Copy app dependencies to container COPY. Let’s run the following command to create a Dockerfile: touch Dockerfile If you already have a react app the replace react-docker with the name of your react folder/ app-name. In your terminal, “change directory” or cd into react-docker folder. Let’s do the following steps to setup docker It's still working, but each time use it, I need to do two things: (1) Enable LiveReload in SublimeText Using Ctrl + Shift + P Search and select 'LiveReload: Enable/disable plug-ins' Next select 'Enable: Simple Reload' (2) Enable LiveReload in the browser Click to LiveReload extension icon (it's turned on when the middle dot of the icon is black) I can do it fast but manually.
Run the following command to create a new React app: npx create-react-app react-docker Create files for Docker This is to ensure that we have somewhere to store the files and folder we are going to create soon. If you already have a react app, feel free to skip this section.Ĭreate a new folder, on your desktop or anywhere on your computer. We’ll start by creating a new react app using the npx command. So it implements a live reloading feature on your project. NPM (Node Package Manager) version 5.2.0 or later Electron Reload is the simplest way to load contents of all active Browser Windows within electron when the source files change.I finally discovered that setting liveReload to false in the forge config in. Getting live reload to work in a React docker setup can be a bit difficult and up to a point seem impossible but in this tutorial, I will show you how to have live-reload working with Docker and React in a few simple steps. Using this plugin, React components can be edited and will hot-reload with.
0 kommentar(er)
