Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@ywwwtseng
Last active March 8, 2024 12:16
Show Gist options
  • Save ywwwtseng/63c36ccb58a25a09f7096bbb602ac1de to your computer and use it in GitHub Desktop.
Save ywwwtseng/63c36ccb58a25a09f7096bbb602ac1de to your computer and use it in GitHub Desktop.
Host react application on Apache server

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
Copy link

Miodragt commented Sep 10, 2022 via email

@RawrBear
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment