{"id":2546,"date":"2023-07-28T22:37:54","date_gmt":"2023-12-17T21:53:18","guid":{"rendered":""},"modified":"2025-02-02T00:46:18","modified_gmt":"2025-02-01T23:46:18","slug":"how-to-install-reactjs-with-nginx-proxy-on-centos-8","status":"publish","type":"post","link":"https:\/\/netcloud24.com\/knowledgebase\/how-to-install-reactjs-with-nginx-proxy-on-centos-8\/","title":{"rendered":"Linux VPS &#038; VPS Windows Setup Guide | NetCloud24 ReactJS with Nginx Proxy on CentOS 8"},"content":{"rendered":"<p>\u00a0<\/p>\n<\/p>\n<header>\n<h1>\u00a0<\/h1>\n<\/header>\n<article>\n<p>ReactJS is a popular JavaScript library for building dynamic user interfaces. When combined with Nginx as a reverse proxy, it provides a robust and efficient setup for hosting React applications. In this guide, we&#8217;ll show you how to install ReactJS with Nginx as a proxy on CentOS 8. If you&#8217;re using a  server, the process is quite similar, but this tutorial focuses on CentOS 8.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before starting, ensure that you have the following:<\/p>\n<ul>\n<li>A CentOS 8 server with root access.<\/li>\n<li>Nginx installed on your server.<\/li>\n<li>Node.js and npm installed.<\/li>\n<\/ul>\n<p>If you&#8217;re hosting on , ensure that you have the equivalent setup for Node.js and Nginx on your Windows-based server.<\/p>\n<h2>Step 1: Update Your System<\/h2>\n<p>Start by updating your CentOS 8 system to ensure all packages are up to date:<\/p>\n<pre><code>sudo dnf update -y<\/code><\/pre>\n<h2>Step 2: Install Node.js and npm<\/h2>\n<p>ReactJS requires Node.js and npm to build and manage packages. Install Node.js and npm by adding the NodeSource repository:<\/p>\n<pre><code>curl -sL https:\/\/rpm.nodesource.com\/setup_14.x | sudo bash -\r\nsudo dnf install nodejs -y<\/code><\/pre>\n<h2>Step 3: Create a React Application<\/h2>\n<p>After installing Node.js, create a new React application using <code>create-react-app<\/code>. First, install the Create React App package:<\/p>\n<pre><code>sudo npm install -g create-react-app<\/code><\/pre>\n<p>Then, create a new React application:<\/p>\n<pre><code>npx create-react-app myapp<\/code><\/pre>\n<p>Navigate into your newly created React application directory:<\/p>\n<pre><code>cd myapp<\/code><\/pre>\n<p>You can start the development server to test your application by running:<\/p>\n<pre><code>npm start<\/code><\/pre>\n<p>This will launch the React app, typically available at <code>http:\/\/localhost:3000<\/code>. However, for production, we need to build the app and serve it using Nginx.<\/p>\n<h2>Step 4: Build the React Application for Production<\/h2>\n<p>To prepare the React app for production, run the following command:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>This will create an optimized build in the <code>build<\/code> directory. We will serve this static content using Nginx.<\/p>\n<h2>Step 5: Install and Configure Nginx<\/h2>\n<p>Install Nginx on your CentOS 8 server:<\/p>\n<pre><code>sudo dnf install nginx -y<\/code><\/pre>\n<p>Start and enable Nginx:<\/p>\n<pre><code>sudo systemctl start nginx\r\nsudo systemctl enable nginx<\/code><\/pre>\n<h2>Step 6: Configure Nginx as a Reverse Proxy<\/h2>\n<p>Now that Nginx is installed, we need to configure it to serve the React build files and act as a reverse proxy. Open the Nginx configuration file:<\/p>\n<pre><code>sudo nano \/etc\/nginx\/conf.d\/reactapp.conf<\/code><\/pre>\n<p>Add the following configuration to serve the static files and proxy API requests if necessary:<\/p>\n<pre><code>server {\r\n    listen 80;\r\n    server_name yourdomain.com;\r\n\r\n    root \/path\/to\/myapp\/build;\r\n    index index.html;\r\n\r\n    location \/ {\r\n        try_files $uri \/index.html;\r\n    }\r\n}<\/code><\/pre>\n<p>Replace <code>yourdomain.com<\/code> with your actual domain and <code>\/path\/to\/myapp\/build<\/code> with the path to your React app&#8217;s build folder.<\/p>\n<p>Save the file and restart Nginx:<\/p>\n<pre><code>sudo systemctl restart nginx<\/code><\/pre>\n<h2>Step 7: Access Your React App<\/h2>\n<p>After configuring Nginx, you should be able to access your React application by navigating to your server&#8217;s domain or IP address.<\/p>\n<h2>Benefits of VPS Hosting for ReactJS<\/h2>\n<p>Hosting a React application on a  or <a href=\"https:\/\/ie.netcloud24.com\">virtual private server hosting Windows<\/a> ensures better performance, scalability, and control over your hosting environment. Using a <a href=\"https:\/\/ie.netcloud24.com\">Windows VPSServer VPS<\/a> gives you dedicated resources, making your application faster and more reliable.<\/p>\n<p>Whether you&#8217;re using a <a href=\"https:\/\/ie.netcloud24.com\">UK Windows VPS<\/a> or <a href=\"https:\/\/ie.netcloud24.com\">Microsoft SQL VPS Windows<\/a>, hosting ReactJS with Nginx as a reverse proxy ensures your application performs optimally. Consider using <a href=\"https:\/\/ie.netcloud24.com\">Windows VPS Hosting UK<\/a> for reliable hosting solutions with robust performance.<\/p>\n<h2>Conclusion<\/h2>\n<p>Installing ReactJS with Nginx as a reverse proxy on CentOS 8 is an efficient way to serve your React applications in production. This guide walked you through setting up a React app, configuring Nginx, and deploying the application. For scalable and high-performance hosting, consider using <a href=\"https:\/\/ie.netcloud24.com\">Windows VPS<\/a> to power your web applications.<\/p>\n<\/article>\n<footer>\n<p>\u00a9 2024 VPS Hosting Solutions<\/p>\n<\/footer>\n<div class=\"post-author-box\" style=\"border-top:1px solid #ddd;margin-top:20px;padding-top:15px;\">\n<p><strong>Author:<\/strong> \u0141ukasz Bodziony<\/p>\n<p><strong>Website:<\/strong> <a href=\"https:\/\/ca.netcloud24.com\" target=\"_blank\" rel=\"dofollow\">Windows VPS<\/a><\/p>\n<p><em>\u0141ukasz Bodziony is the CEO and founder of <a href=\"https:\/\/netcloud24.com\" target=\"_blank\" rel=\"dofollow\">NETCLOUD24<\/a>, a global VPS hosting brand proudly originating from Poland. With extensive experience in cloud computing, virtualization, and server management, he delivers high-performance <strong>Windows VPS<\/strong> and <strong>Remote Desktop Services (RDS)<\/strong> solutions to clients across Europe, North America, and beyond.<\/em><\/p>\n<p><em>His expertise covers a wide range of technologies, including <strong>Microsoft Azure<\/strong>, <strong>Proxmox VE<\/strong>, <strong>Amazon Web Services (AWS)<\/strong>, and numerous other virtualization and cloud platforms.<\/em><\/p>\n<p><em>Beyond running his hosting business, \u0141ukasz also provides <strong>professional paid server configuration and optimization services<\/strong> for companies and individuals. Outside of work, he is dedicated to caring for his children and building a secure future for them.<\/em><\/p>\n<p><em>If you are interested in working with him or need expert assistance with your hosting, cloud environment, or server setup, feel free to reach out via <a href=\"https:\/\/ca.netcloud24.com\" target=\"_blank\" rel=\"dofollow\">Windows VPS<\/a>.<\/em><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 \u00a0 ReactJS is a popular JavaScript library for building dynamic user interfaces. When combined with Nginx as a reverse proxy, it provides a robust and efficient setup\u2026<\/p>\n","protected":false},"author":1,"featured_media":3421,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[],"tags":[14,12,11,23,20,21,22,17,7,8,6,10,18,19,15,24,16,5,13,9],"class_list":["post-2546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cheapvps","tag-cloudvps","tag-hostingvps","tag-rds","tag-rdscal","tag-remotedesktop","tag-remotedesktopvps","tag-servervps","tag-ukvps","tag-virtualserver","tag-vpshosting","tag-vpsserver","tag-vpssolutions","tag-vpswindows","tag-vpswithwindows","tag-windowsrds","tag-windowsserver","tag-windowsvps","tag-windowsvpshosting","tag-windowsvpsuk"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/2546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=2546"}],"version-history":[{"count":0,"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/2546\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/media\/3421"}],"wp:attachment":[{"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=2546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=2546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netcloud24.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=2546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}