Host react application on Apache server

host-react-app-on-apache-server.md

Host react application on Apache server

Step 1 : Create your app

$ npm install -g create-react-app 
$ create-react-app my-app

Step 2 : Build it for production

$ cd my-app
$ npm run build

Step 3 : deploy

• copy and paste everything in build folder to your server
• edit /etc/httpd/conf/httpd.conf

<Directory "/var/www/html">
    ...
    AllowOverride All
    ...
</Directory>

• create a “.htaccess” file in html directory and add this snippet :

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

or edit /etc/httpd/conf/httpd.conf

<Directory "/var/www/html">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride All

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

Reference

Host react application on Apache server

@Miodragt React uses port 3000 for dev mode. For production, you need to build the project, which generates your index.html with .js bundle and other assets. Then, you can make it available through Apache virtualhost and port 80/443.

If you are reading this and it hasn't work for you, all you need to do is to change "private": true to "private": false in your package.json file before you run npm run build and remove the "homepage" object in your package.json as it is no longer necessary.

Can somebody please explain me how to save query string between reloads?

Created Document on Deploy React Application on apache and also discuss on some issues

https://infinitbility.com/deploy-react-application-on-ubuntu-apache

Hello,
I'm trying to host my react app on Namecheap (which eventually uses apache server, knew from google). I'm also facing problem with blank page. How can I fix this? And where should I run those commands which you shared on your documentation? Any idea?

You must in config file change port of 3000 to port 80. This is in server config , there you set express or node. I send to you later some script. Regard Mr. Miodrag Trajanovic Serbia

…

On Fri, 9 Sep 2022, 13:57 Saiful Islam Shakil, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Created Document on Deploy React Application on apache and also discuss on some issues https://infinitbility.com/deploy-react-application-on-ubuntu-apache Hello, I'm trying to host my react app on Namecheap (which eventually uses apache server, knew from google). I'm also facing problem with blank page. How can I fix this? And where should I run those commands which you shared on your documentation? Any idea? — Reply to this email directly, view it on GitHub <https://gist.github.com/63c36ccb58a25a09f7096bbb602ac1de#gistcomment-4295432>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFM54N6X3REWCCSWTHYE7NTV5MQZJANCNFSM4HW7W2QQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

Thank you! This worked perfectly!

las mieles

I have deployed the react js application, and the images are not displayed. I have created the application, placed all the images in public folder only. But still it is not able to rendering. Any inputs?