Running React on Hugging Face using Docker

In today's fast-paced development environment, ensuring your application is portable, scalable, and easy to deploy is crucial. Docker has become an indispensable tool for developers, providing a consistent environment from development to production. This article walks you through setting up a modern React application and deploying it using Docker.

Project Overview

Our project structure is as follows:

Let’s break down each component and its role in our project.

1. Dockerfile

A Dockerfile defines the steps to create a Docker image. Here’s our Dockerfile:

• FROM node:16: This line sets the base image for our container, which includes Node.js version 16. Using a specific Node.js version ensures compatibility.
• WORKDIR /app: Sets the working directory inside the container to /app. All subsequent commands will be run in this directory.
• COPY package.json ./*: Copies package.json and package-lock.json files to the working directory. This ensures that npm can install all necessary dependencies.
• RUN npm install: Installs the dependencies listed in package.json.
• COPY . .: Copies the rest of the application’s code to the working directory in the container.
• RUN npm run build: Builds the React application using Webpack. This compiles the source code into a static bundle that can be served.
• EXPOSE 7860: Exposes port 7860 so that the application can be accessed from outside the container.
• CMD ["node", "server.js"]: Specifies the command to run when the container starts. This runs the Node.js server defined in server.js.

2. package.json

The package.json file holds metadata relevant to the project and is used to manage dependencies, scripts, and configuration settings:

• name: The name of the project.
• version: The current version of the project.
• scripts: Defines npm scripts that can be run using npm run <script-name>. Here, start runs the server, and build compiles the React application using Webpac
• k.dependencies: Lists the libraries required to run the application. In this case, express for the server, and react and react-dom for the React applicatio
• n.devDependencies: Lists the tools required for development, including Babel for transpiling JavaScript and JSX, Webpack for bundling, and various loaders and plugin

.

3. server.js

The server.js file sets up an Express server to serve our built React application:

• express: Imports the Express library.
• app.use(express.static(path.join(__dirname, 'dist'))): Serves the static files from the dist directory, which contains the built React application.
• app.get('*', (req, res) => {...}): A catch-all route handler that sends index.html for any request that doesn’t match a static file. This enables client-side routing in the React app.
• app.listen(port, () => {...}): Starts the server on the specified port (default 7860), and logs a message when the server is running.

4. webpack.config.js

Webpack is a module bundler that compiles JavaScript modules into a single file. Here’s the configuration:

• entry: Specifies the entry point for the application.
• output: Defines the output file and directory for the bundled code.
• module.rules: Specifies loaders for processing different types of files.babel-loader: Transpiles JavaScript and JSX files using Babel.css-loader and style-loader: Processes and includes CSS files.
• plugins: Includes plugins to enhance Webpack’s functionality.HtmlWebpackPlugin: Generates an HTML file that includes the bundled JavaScript.
• resolve.extensions: Specifies the file extensions Webpack should resolve.

5. .babelrc

Babel is used to transpile modern JavaScript and JSX to a version compatible with older browsers:

• presets: Defines Babel presets to use. @babel/preset-env handles ES6+ features, and @babel/preset-react handles JSX.

6. src/index.js

This file is the entry point for our React application:

• ReactDOM.render: Renders the App component into the root div in index.html.

7. src/App.js

Our main React component, which serves as the starting point for our application:

• App: A simple functional React component that renders a greeting message.

8. public/index.html

The HTML template for our React application:

index.html: A basic HTML template with a div for mounting the React app.

Building and Running the Application

Once all the files are in place Hugging Face will immediately launch the Dockerfile and build your application. The final product was not that sexy (see below). But with Claude.ai I can now mold it into anything I want.

Wow! I have wings and can now program as fast as I can think!

Here is the link to the Hugging Face App. The application is public, so you can copy the code.

https://huggingface.co/spaces/eaglelandsonce/ReactSpace

Conclusion

By containerizing our React application with Docker, we ensure it runs consistently across different environments, from development to production. This setup leverages modern tools like Webpack and Babel for efficient development and build processes. Whether you're a seasoned developer or just getting started with Docker and React, this guide provides a robust foundation for building and deploying your next project.

Embracing Docker for your development workflow not only enhances portability and scalability but also significantly streamlines the deployment process. With Docker, you can be confident that your application will work seamlessly, regardless of the environment in which it is deployed.

Feel free to reach out if you have any questions or need further assistance in setting up your Dockerized React application. Happy coding!