I am currently working on a react project. I am setting it up for deployment, hence building it with the "npm run build" command.
Unfortunately, when I do so and serve the /build contents to an apache webserver (be it on DigitalOcean or on local with XAMPP), all routes are not working and throw a 404 not found error. The homepage works fine though, and so does the project when run through "npm run start command"
I have tried looking for solutions online, but I haven't been able to solve this issue yet.
Want to share this, in case someone bumps into this question in the future:
This is assuming Ubuntu is used as OS:
I've followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.
To quote:
1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.
127.0.0.1 yourdomain.com
3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.
Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
End quote
Assuming you've run npm run build and then copied all the contents inside the build folder to your public directory, this should work.
When I first started web dev, I wasn't really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I've confirmed that I'm able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.
Hope this helps you now as much as it did for me!
Related
I'm building a react project using create-react-app and am trying to figure out how to deploy my code to my hosting server on Siteground.
Does anyone know the best way to do this? Do I import my build folder through FTP? Can I automate the process through GitHub?
Thanks in advance!
Per the create-react-app docs, you run npm run build and basically just take the output and FTP it to your web server.
However your question is very broad -- you could automate through GitHub or some other tool, but that's really going to beg opinionated responses on StackOverflow (which isn't the right forum for those kinds of questions).
npm run build or yarn build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.
source: create-react-app
I just uploaded my create-react-app to siteground with FileZilla here is the step by step:
Once you have it all production ready npm run build
Open siteGround on your browser and into myAcount section click on go to cPanel scroll down and find FTP Accounts
create a new account pointing to the directory public_html
once created, it will appear down below and all the way to the right click on configure FTP client and under manual setting you've got what you need to connnect
open FileZilla and in file go to siteManager then new site
host(in filezilla) === FTP server (in sitiGround), port set it as siteground port , protocol and encryption leave it as default
Logon Type set as normal , user === FTP user(siteGround) and password the one you've used to create that FTP user
click on connect and paste the content of yourApp/build (from the left side that is your PC) to (the folder at the right hand side) that is your public_html in siteGround
That's it! go to your website and check, the react app should be displayed there
here is the source of this procedure
https://www.siteground.com/tutorials/ftp/
Here they use quick connect for fileZilla though, I have more than one site so siteManager is cleaner and stores your credentials for next time
Usually there are guided strategies from host vendors.
Example:
Heroku Create React App Build
S3 Cloudfront
Otherwise you'll have to manage it by yourself, registering a custom build script that acts with:
npm run build
And then move the build folder. If you use Maven you can manage the entire build with plugins like:
Frontend Maven Plugin
If you are using create-react-app, then you could do:
npm run build or yarn build
Copy everything that is inside of the build folder as a result of the previous point
In order to get the routes working, add .htaccess file with the following content:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Export it to the root folder of your server (normally public_html)
Check this great article for more info :)
Hope it helps!
I have problem deploying on siteground as well the simple solution is to have a git repo for your build and setup your public_html folder on siteground to track that git repo.
make sure to also create
.htaccess
with the content something like this
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
If you don't have that your routing won't work
Also remember to go Tools->Speed->Caching and flush the cache if you have deployed otherwise before
I have completed angular project. now i want to change some url format force fully using htaccess file.so where should i put htaccess file?
I have tried everywhere like belows path:
/opt/lampp/htdocs/GreatColoradoHomes
/opt/lampp/htdocs/GreatColoradoHomes/src
/opt/lampp/htdocs/GreatColoradoHomes/src/app
there is answer in github issue
Put .htaccess in src folder (final path for is src/.htaccess)
Add it to angular-cli.json in the assets array (like favicon.ico).
Have something similar to this:
"assets": [
"assets",
"assets/images/favicon.ico",
".htaccess"
],
By having .htaccess outside the src, you'll most likely to get the following error,
An unhandled exception occurred: The .htaccess asset path must start with the project source root.
The corrected approach is this,
"assets": [
"src/favicon.ico",
"src/assets",
"src/.htaccess"
],
...
Make sure to put your .htaccess file under src.
With the above settings, when you run your build, you'll get the .htaccess inside the dist.
You can also copy files to dist folder after build by defining your build commands in package.json on key scripts e.g.
"buildProd": "ng build --prod && cp ./.htaccess ./dist/project-name/.htaccess",
copy file .htaccess to main projet folder (not src) and run build command by npm run buildProd to create dist.
This approach not introduce server files to angular build step (it do it "outside").
I have application on Angular 12 and nothing worked for me except the below solution, I have my hosting at GoDaddy Linux server.
I was getting 404 on refresh of page and below code resolved my error
put below code in .htaccess file and place your file in project folder(top level along with angular.json file) not in src or somewhere else
RewriteEngine On
Options +FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html?/$1 [QSA,L]
then run the below command in terminal
ng build --prod
then run the below command in terminal to copy your .htaccess file in dist/projectName folder
cp ./.htaccess ./dist/projectName folder/.htaccess
I hope that this solution helps someone like me.
I am working through the cakephp installation for production use and I have a problem. I use hostmonster, so this is a shared server using a LAMP stack. The documentation asks you to change the Root Directory as shown:
DocumentRoot /cake_install/app/webroot
To do this, I added the following statements to my .htaccess file:
RewriteCond %{REQUEST_URI} !^/public/
RewriteRule ^(.*)$ /cake_install/app/webroot/$1 [L,R=301]
This resulted in the error below:
Error: The view for AppController::webroot() was not found.
When I navigate to www.example.com I am taken to the proper address, but there are errors. These errors disappear if I add an index.php to either the address or obviously to the rewrite rule.
So, what am I doing wrong here? Is the documentation incorrect in that the rewrite rule should have the additional index.php, should be address work without it, or is there something wrong somewhere else?
Update: The second part of the errors says:
Error: Confirm you have created the file: /home2/cadwolfc/public_html/cake_install/app/View/App/webroot.ctp
The version of cake that I downloaded did not have anything the /app/View folder. When I created the /App/webroot.ctp file it got rid of the errors, but it overrides all other view calls.
If your hosting provider has not enabled mod_rewrite. Then you would need to delete the .htaccess files
/.htaccess
/app/.htaccess
/app/webroot/.htaccess
If I am wrong and there is nothing wrong with mod_rewrite then you should edit your htaccess file and do something like
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
My guess is this is what you're looking for: HostMonster - How to host the Primary Domain from a subfolder (.htaccess)
On most shared hosts, you can't change the document root. Since hostmonster has mod_rewrite there are no special steps for installing cake on hostmonster. There are several ways to install cake - all of them are valid on hostmonster.
Use a development install
The simplest way to set up an application is to use a development install i.e. so the following folder structure exists:
/home2/cadwolfc/public_html/app
/home2/cadwolfc/public_html/lib
/home2/cadwolfc/public_html/plugins
/home2/cadwolfc/public_html/vendors
/home2/cadwolfc/public_html/.htaccess
/home2/cadwolfc/public_html/index.php
Don't edit any of the .htaccess files unless a specific problem is encountered, or a specific requirement needs to be met. This can be achieved very easily with the following commands or equivalent:
cd /home2/cadwolfc
mv public_html old_public
git clone https://github.com/cakephp/cakephp.git public_html
Or symlink the document root
Alternatively put your files anywhere on the server, and just symlink the webroot:
/home2/cadwolfc/anywhere/app
/home2/cadwolfc/anywhere/lib
/home2/cadwolfc/anywhere/plugins
/home2/cadwolfc/anywhere/vendors
/home2/cadwolfc/anywhere/.htaccess
/home2/cadwolfc/anywhere/index.php
/home2/cadwolfc/public_html -> ../anywhere/app/webroot
In this way only the webroot is public and only the webroot .htaccess file is relevant.
Or copy/move the webroot
Alternatively put your files anywhere but move the webroot to the document root. Then update the root constant to point at where the source files are:
// app/webroot/index.php
/**
* The full path to the directory which holds "app", WITHOUT a trailing DS.
*
*/
if (!defined('ROOT')) {
define('ROOT', '/home2/cadwolfc/overhere';
}
What does cake_install mean?
In Cake's documentation, cake_install is explained as follows:
For the purposes of this example, we assume you chose to install CakePHP into /cake_install.
It's just an example. However, it's an example used in the "production install" section, a production install doesn't have all or the application files inside the document root. Setting up a "production install" with the source files inside the document root is not a production install, it's a custom development install (bringing with it custom problems).
Therefore the logical choice is (both of which are usable/secure with mod_rewrite):
Use a standard development install
use an actual production install
But not a hybrid of the two =)
i have build a webapp on Cakephp 2.3 .. on my locaLhost all urls were fine.. i can access my urls like this
http://localhost/Cakephp
but now when i have uploaded the site on server in root folder ... i cant access my url like this
http://www.myweb.com
instead it can accessible like this
http://www.myweb.com/index.php/login
what i think that might be a problem is the .htaccess file in my app/webroot folder
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
I think this kind of index.php is causing the problem ..as i dont know about .htaccess so dont know how to remove it.
How do I get index.php out of my urls?
So, it should be ok? You already have mod_rewrite?
If mod_rewrite is correctly loaded, .htaccess files are in place and index.php still appears in links then it is most probably problem with core.php framework configuration file.
Problem cause
In my case it was problem with App.baseUrl configuration option:
Configure::write('App.baseUrl', env('SCRIPT_NAME'));
Solving problem
Here is how I fixed that problem (and few others with redirects) by commenting out following line from core.php:
// Configure::write('App.baseUrl', env('SCRIPT_NAME'));
Check the mod_rewrite module is installed or not? if not kindly enable it in httpd.conf file.
Find the following line and remove # (means uncomment) in front of it.
LoadModule rewrite_module modules/mod_rewrite.so
Also don't forget to restart apache http service using following command:
service httpd restart
Following are the steps to edit http.conf file from CPanel:
Log in to WHM/cPanel as the root user.
Open the "Service Configuration" section.
Open the "Apache Configuration" section.
Click "Global Configuration" to access the httpd.conf's settings, as displayed through cPanel.
Make your desired changes, then click the "Save" button. This saves the changes and then reboots Apache so that the changes are applied.
Read more: http://www.ehow.com/how_8696084_edit-httpdconf-cpanel.html#ixzz2YRDEgOMT
On IIS Server Read this link to enable mod_rewrite
on ubuntu,
sudo a2enmod rewrite
sudo systemctl restart apache2
(Not sure if this belongs here or on webmasters; please move if necessary.)
I'm a total newbie to Cake and not much better with apache; I've done
a lot of PHP but always with a server that's already been set up by
someone else. So I'm going through the basic blog tutorial, and it
says:
A Note On mod_rewrite
Occasionally a new user will run in to mod_rewrite issues, so I'll
mention them marginally here. If the Cake welcome page looks a little
funny (no images or css styles), it probably means mod_rewrite isn't
functioning on your system. Here are some tips to help get you up and
running:
Make sure that an .htaccess override is allowed: in your httpd.conf,
you should have a section that defines a section for each Directory on
your server. Make sure the AllowOverride is set to All for the correct
Directory.
Make sure you are editing the system httpd.conf rather than a user- or
site-specific httpd.conf.
For some reason or another, you might have obtained a copy of CakePHP
without the needed .htaccess files. This sometimes happens because
some operating systems treat files that start with '.' as hidden, and
don't copy them. Make sure your copy of CakePHP is from the downloads
section of the site or our SVN repository.
Make sure you are loading up mod_rewrite correctly! You should see
something like LoadModule rewrite_module libexec/httpd/mod_rewrite.so
and AddModule mod_rewrite.c in your httpd.conf."
I'm using XAMPP on linux. I've found my httpd.conf file in opt/lampp/
etc, but am not sure what I need to do with it. I've searched for
"rewrite", and there's only one line:
LoadModule rewrite_module modules/mod_rewrite.so
There's nothing about AddModule mod_rewrite.c.
Do I just create a Directory section for the directory I've installed
Cake in and set AlllowOverride to All? (I created a separate
subdirectory of my wwwroot and installed in there, since I also have
installs of Joomla and CodeIgniter.) Is there anything else I need to
do? My download of Cake did come with two htaccess-type files
(._.htaccess and .htaccess) - do I need to do anything with them?
Thanks for any help you can provide to this non-server-admin.
EDIT TO ADD virtual host sample:
<VirtualHost *:80>
ServerAdmin webmaster#dummy-host.example.com
DocumentRoot /www/docs/dummy-host.example.com
ServerName dummy-host.example.com
ServerAlias www.dummy-host.example.com
ErrorLog logs/dummy-host.example.com-error_log
CustomLog logs/dummy-host.example.com-access_log common
</VirtualHost>
Step 1. You should have mod_rewrite enabled, check using <?php phpinfo();
Step 2. Check AllowOverride
// I believe you already did that.
// Make sure you are doing it for the correct webroot!
<Directory />
AlllowOverride to All
</Directory>
Step 3. Check your default .htaccess files are there in directories /mypro, /mypro/app, /mypro/app/webroot.
Step 4. .htaccess may need path fixes depending upon your cake project installation.
e.g. project url http://localhost/mypro/app/webroot/
/mypro/app/webroot/.htacess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ mypro/app/webroot/ [L]
RewriteRule (.*) mypro/app/webroot/$1 [L]
</IfModule>
EDIT
If you are trying to setup it as local domains, Setup local domains (on windows) with WAMP configured
Note: this may be tweaked a little for different kind of installations
Find your hosts file (mine is located at C:\WINDOWS\system32\drivers\etc\hosts)
Insert this to bottom
# save and close this file named hosts
127.0.0.1 mypro.localhost
To test hostname open command prompt and run ping mypro.localhost # If ping is good then move on
Now open your apache config file
httpd.conf and httpd-vhosts.conf (my files are located at)
C:\wamp\bin\apache\Apache2.2.11\conf\httpd.conf
# uncomment line below
Include conf/extra/httpd-vhosts.conf
C:\wamp\bin\apache\Apache2.2.11\conf\extra\httpd-vhosts.conf
# Insert virtual host entries like this, trim dummy entries (if any)
# Changing DocumentRoot
<VirtualHost *:80>
DocumentRoot "C:/wamp/www"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "C:/wamp/www/mypro/app/webroot"
ServerName mypro.localhost
</VirtualHost>
Save and close files
Create directory C:/wamp/www/mypro (if you haven’t created before)
ModRewrite enables Apache to manipulate request URLs before it handles the request. For example, if you wanted to store your images in /website_images but you wanted to reference them in your HTML as /img/donkey.jpg you could use ModRewrite to change all requests from /img/* to /website_images/*. The way that it handles this is through Regular Expressions, which have entire books written about them.
As far as Apache goes, there are lots of configuration "directives" (aka options or settings). The most crucial to learn about when you're running your own server are going to be the VirtualHost ones. They allow Apache to handle requests to your server's IP address and route them to the correct website based on the hostname (the domain, essentially). You should place any website-specific directives within that website's VirtualHost configuration, including your ModRewrite rules. Note: you can also load additional directives from a .htaccess file in the website's directory, but this is suboptimal (and requires AllowOverride to be set. If you have access to httpd.conf and the related VirtualHost directives, you should use them instead.
It looks like Apache is already configured to load the ModRewrite module, so you don't need to change that. In the VirtualHost directives for your new CakePHP website, you can use the following directives under the <Directory /path/to/your/website> to setup ModRewrite:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>
It looks big and scary, but what that does is tells Apache to direct all requests that it can't handle (because the resources don't exist) to index.php. When that happens, CakePHP takes over and routes the request to the appropriate controller and action.
I'm not familiar with how XAMPP is configured, so I can't tell you where those VirtualHost definitions are going to be. Perhaps someone else can chime in here…