Using Create-React-App with Apache VirtualHost - reactjs

I am trying to develop a project for a company. This company has an API that only allows requests from two sources: Their own host, and xyz.localhost.
At first, I developed the project with jQuery only (loaded in via CDN). With an Apache VirtualHost setup, this worked -- I could access the API.
Now, I want to refactor the project and use React with it. I used create-react-app to create a react directory.
The problem is: I can get create-react-app to use xyz.localhost, but I am still getting the CORS error message in Chrome:
Access to fetch at 'http://api.thatcompany.com/search?search=a'
from origin 'http://xyz.localhost:3000' has been blocked by CORS policy
Has anybody any ideas how to make it work?
Thank you in advance.
/private/etc/apache2/httpd.conf:
# Virtual hosts
#Include /private/etc/apache2/extra/httpd-vhosts.conf
Include /private/etc/apache2/vhosts/*.conf
/private/etc/hosts:
127.0.0.1 xyz.localhost
255.255.255.255 broadcasthost
::1 xyz.localhost
/private/etc/apache2/vhosts/xyz.localhost.conf:
<VirtualHost *:80>
DocumentRoot "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public"
ServerName xyz.localhost
<Directory "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public">
AllowOverride All
Require all granted
</Directory>
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
</VirtualHost>
My create-react-app start script:
"scripts": { "start": "HOST=xyz.localhost react-scripts start" }

I found a workaround.
I simply pointed the VirtualHost to the build folder of Create React App, this worked and served me the static files.
Editing the code was pretty tiresome, as I had to run npm run Build after every update.
Luckily, I found the npm watch module. With that, create react App would rebuild on every save. I still have to wait a second between save and refreshing the browser, and it’s absolutely not comparable to using create react app on its own, but it was a good enough solution!

Related

Clear the Browser Cache of React app after every new deployment

I have added Cache Headers but Its doesnt remove my Browser Cache. Can anyone please help how to do that??
<VirtualHost *:443>
ServerName <ip-address>
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html/build
Include conf/headers.conf
SSLEngine on
SSLCertificateFile /etc/httpd/sites-available/cert.crt
SSLCertificateKeyFile /etc/httpd/sites-available/ssl.key
<Directory /var/www/html/build/>
Options +FollowSymlinks
AllowOverride All
Require all granted
</Directory>
There are many different browsers, there is no 100% reliable way for you to control what a clients browser stores in it cache. You can set headers on your servers response which tell a web browser that it should dump old files from it's cache and request new ones after a predefined period but this is only a recommendation, the browser may choose to ignore it, after all you do not control the browser software a client is using.
Set browser cache control headers in your Apache config file something like this...
# here we are telling the browser to request new files for specific images after 604800 seconds or 7 days, i.e. dump the cache if files are more than 7 days old
<FilesMatch "bird.jpg|dog.jpg|noob.jpg|fish.jpg|rabbit.jpg|cow.jpg">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>
# here we are telling the browser to request new files for specific file types after 86400 seconds or 1 day
<FilesMatch ".(css|js|ttf|ico)$">
Header set Cache-Control "max-age=86400, public, must-revalidate"
</FilesMatch>
If you are just looking for a quick way to clear the cache on google chrome on your own pc you can install a browser plugin to to that such as https://chrome.google.com/webstore/detail/no-cache-refresh/njacldedajpdoofkhpfckdkgcahjlfkj

Running development version of create-react-app in Apache

I've looked around for this everywhere and there is tonnes of documentation on how to DEPLOY apps created with create-react-app to apache which is fairly straight forward, however there's barely anything on how to run your development environment on apache.
I'm working on an app that's going to be deployed on an apache server and so I want to mimic the environment during development but can't figure out how to set it up correctly. Is it even possible?
I have the following conf file set up for my site - but because the index.html file doesn't directly include the JS required for React to do its magic, I just get an empty page with the <div id="root"></div> holder.
Conf:
<VirtualHost *:80>
ServerName warehouse.local.com
DocumentRoot /var/www/warehouse-local/public
ErrorLog /var/log/apache2/warehouse.local.com-error_log
CustomLog /var/log/apache2/warehouse.local.com-access_log common
<Directory /var/www/warehouse.local.com>
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
Anyone got any advice on how to achieve what I'm after?
emmm,why you want to run dev version in Apache?
I think ,I will need Apache just when I deploy my prduction version of react app.

Apache2 conf file redirecting requests for other enabled sites

I'm running apache2 on ubuntu 16.04. I've configured apache2 to run multiple sites. One of the sites has https setup and to help support this I've added the following rule to redirect http requests to use https:
<VirtualHost *:80>
ServerName http://example.com
Redirect permanent / https://example.com/
</VirtualHost>
This has been too much of a blanket rule as it's redirecting other site's https requests to the domain above.
How can I re-configure the conf above to only redirect http requests for example.com and not the other sites on the same server?
The first listed virtualhost for each host:port acts as the default, catching all unmatched ServerNames. Make sure you don't define your special-case first.
See apachectl -S output for a summary of where your vhosts are loaded from and which one is the default.

How to configure Phoenix Framework behind Apache

I'm trying out Phoenix and for reasons beyond my control, I need it to be served through apache2.
There's a guide for serving Phoenix behind a proxy webserver but it only gives an example configuration for nginx (which I would be using if I could).
So I went to the documentation for mod_proxy and added these two lines to my VirtualHost:
<VirtualHost *:443>
...
LoadModule proxy_module modules/mod_proxy.so
ProxyPass /back http://www.example.com:4000 timeout=10
...
</VirtualHost>
I have the default Phoenix app running in development mode on port 4000. I tried going to https://example.com/back and the result is
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
I've checked my logs at /var/log/apache2/error.log and there is no error message corresponding to GET /back, although there IS a corresponding entry in access.log. All of the other things I'm serving are still working fine. I'm at a loss here, any pointers?
The problem was twofold.
Firstly, proxy submodules needed to be enabled.
sudo a2enmod proxy_http && sudo service apache2 restart
What led me to this fix was enabling a higher log level in apache2.conf:
LogLevel debug proxy:trace4
The relevant error was AH01144 (list of apache2 errors).
Secondly, I needed a reverse proxy:
<VirtualHost *:443>
...
ProxyPass /back http://www.example.com:4000 timeout=10
ProxyPassReverse /back http://www.example.com:4000 timeout=10
...
</VirtualHost>

Apache2 cannot run WSGI script

I'm installing Reviewboard on linux, I have copied the config provided by the install package to httpd.conf
<VirtualHost *:80>
ServerName localhost
DocumentRoot "/usr/www/reviewboard/htdocs"
# Error handlers
ErrorDocument 500 /errordocs/500.html
WSGIPassAuthorization On
WSGIScriptAlias "/reviewboard" "/usr/www/reviewboard/htdocs/reviewboard.wsgi/reviewboard"
<Directory "/usr/www/reviewboard/htdocs">
AllowOverride All
Options -Indexes FollowSymLinks
Allow from all
</Directory>
# Alias static media requests to filesystem
Alias /reviewboard/media "/usr/www/reviewboard/htdocs/media"
Alias /reviewboard/errordocs "/usr/www/reviewboard/htdocs/errordocs"
Alias /reviewboard/favicon.ico "/usr/www/reviewboard/htdocs/media/rbcommons/images/favicon.png"
</VirtualHost>
However, when I access "http://SITE/reviewboard/htdocs/reviewboard.wsgi", it just gives me the file in plain text instead of running the script
I have checked the mod_wsgi is running on apache2 by "apache2ctl -t -D DUMP_MODULES"
Did I miss any other configuration?
You should be using the URL:
http://SITE/reviewboard
and the WSGIScriptAlias directive should be:
WSGIScriptAlias "/reviewboard" "/usr/www/reviewboard/htdocs/reviewboard.wsgi"
Do be aware though that it is bad practice to be putting your whole Django site under DocumentRoot. That you are seeing the source code for the WSGI script file highlights why it is bad. That is, have an issue with your Apache configuration and you could expose all your source code for people to download. Especially bad if settings.py is in there and it contains database passwords.
Now, address those issues and update question with what you then have and what next problem is as I don't expect that to completely solve the problem because with those mistakes you should have got a different problem than what you describe, so suspect that your configuration is not even being used.

Resources