this is the first time I use Codeigniter 4
I'm already installed codeigniter 4 with composer or manual
already copy index.php and .htaccess to root when manual install and run
already run with php start spark serve too
already set baseurl
welcome_message is success run when I Write in URL localhost:8080 or localhost/ci4
but when I write in URLlocalhost:8080/home/index with spark serve, show 404 - File Not Found
and when I write in URL localhost/ci4/home/index still show 404 - File Not Found
anyone please help me....
Go into Your_Project_Folder > index.php
Change, FCPATH . '../app/Config/Paths.php' to FCPATH .'app/Config/Paths.php'
I'm already have solution, in file Routes.php I set $routes->setAutoRoute(true);
but i saw in reference no one use this trick and they can call the controller
I've created a react app with the following folder structure
-public
--dist
---bundle.js
---styles.css
--index.html
--images
-server
--server.js
-src
--components
--app.js
-.babelrc
-package.json
-webpack.config.js
I want to upload it to cPanel. Is that possible? Would I also need to upload the node_modules/ folder?
here is a link to my repo: https://github.com/theoiorga/react-expensify-app
step 1:"homepage": ".", -->add this on package.json file
step 2 : npm run build --> this will create a build folder.
step 3 : make a .htaccess it will look like this
<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>
step 4 : now take all the files in build folder plus your htaccess and drop them in the desired domain or subdomain
Follow the steps to deploy your React website on CPanel
Step(1) : Under your local project directory run this command "npm
run build" or "yarn build" then "build" directory will be created. This directory contains the bundle of all static files with dependencies which you can directly copy onto your production server.
Step (2) : Go to inside the "build" folder and select all files and compress or make a Zip then upload in cpanel it will work.
Note: for react app no need to upload whole projects we need to deploy only "build" directory.
To Deploy React App on Cpanel/Server. Please follow the Steps
Step 1) Go to Package.json file and add this Property "homepage":"http://yourdomain.com" and paste your domain within it. Like
Step 2) Now build the App using npm run build
In your project directory it will create a build folder and it will contain all your static files for project. Zip all files and upload on your cpanel directory where your website run.
Step 3) Create an .htaccess file and Place it on root directory. And paste the below code in .htaccess file.
<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>
Now Run your Project. It will Work.
Thanks
I had the same issue recently. As a newbie to React, I have deployed my app to Heroku many times, as part of the React course. However, I wanted to deploy to my own shared server (CPanel), to learn how it is done. But also to use my hosting to host other apps I code.
Anyway, What Kallayya and Sumit mentioned above both needs to be done. There is also a great step by step information here.
NB. If you did not use something like 'npx create-react-app' to create the app (boilerplate) then, you will not get a 'Build' folder.
My initial boilerplate was created from scratch as part of the course. So I was initially confused about why I was not getting a Build folder. Then I realised that 'Build' folder is created if the app was created with e.g. 'npx create-react-app' or 'yarn create react-app'. I had used 'npx create-react-app' to start another project. In the new project, I was able to get a Build folder. Hence, my realisation.
So if you run a build and you don't get a Build folder (as mentioned above). Then the files to deploy to live will be the content in the 'public' directory on your local site. (If you have env setup for production and development, then you may need to build for production e.g. yarn build:prod).
Now follow the same process in the step by step link, above. However, upload the content from your 'public' directory in your local site, to the public_html folder on your remote hosting server. Create and upload your .htaccess file as shown on the page of the above link. Now view your site at your relevant domain.
Following the steps in the above link, I was able to deploy to my Shared hosting and view my app at my domain. It works perfectly fine. Haven't seen any issues yet.
I hope this will be helpful to others.
I resolved it by implementing the following steps
Step 1
Add the following in package.json
"homepage": "."
Step 2
Add the following in the public/index.html above meta: description
<script type="text/javascript"> document.write("<base href='//" + document.location.host + "' />"); </script>
Step 3
Build your App using npm run build
Step 4
Upload files inside /build folder to the server using any file transfer tool
Step 5
Create and add the following in .htaccess
<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>
Just upload your local public folder to your hosting public_html folder
Make sure your hosting provider supports Node.js that you will see on CPanel.
The company I use is Namecheap and they just added Node.js runtime environment to CPanel.
Contact your hosting company and ask them if they support Node.js
I’m agree with the fact that you should have a dedicated or VPS hosting, because you will need to have control to the command line.
What I would suggest you to do, apart of what has been mentioned in other comments (accessing the cPanel via SSH and install node and npm, etc), you should upload the files using GitHub or BitBucket.
When you do it this way it will be even easier to keep updating your web app every time you need.
I imagine you have ssh access. If you do install NodeJS via SSH and then upload your files, it will be better if you do it on your public_html. Not only the build but the whole project. I would do it using git.
When you have you files up you will have to install npm and in your client folder you have to install your client, because just uploading the node_modules folders won't work.
You should install forever and run forever node server.js, that will make the server run even when you close the terminal
I hope I explained myself.
I have a hosting plan with siteground and I can host as many websites as I want with that plan.
Hosting a react app with siteground was super easy once I figured it out.
I got a good chunk of what I know by reading this thread, so if you want visuals you can look to the top answer.
Step 1) Add "homepage":".", to the object in your package.json file.
Step 2) In your terminal run npm run build
Step 3) Add a .htaccess file to your build folder with the following code:
<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>
Step 4) Use a file manager to upload all of the files from your build folder including your .htaccess file to the public folder on the server. I used FileZilla, but you can use the built in file manager or SSH keys. If you don't know how to make an FTP user, go here.
Siteground specific instructions:
Step 5) Navigate to the site tools for the desired website. (You can even use a temporary domain for this).
Step 6) Install an SSL certificate in Security > SSL Manager. (You can use the free one. Take note of the expiration date.)
Step 7) Enforce HTTPS by going to Security > HTTPS Enforce and turn it on.
That should work! Send questions if you have any.
I have no affiliation with siteground or any company. I am a freelance web developer that is developing my react skills
React applications are built on Node.js and do not work out of the box on Cpanel.
I am assuming you are working with a Linux server. To deploy your react app, you need to do the following.
Make sure you have root assess to the server. That is only possible if you are working with a VPS or dedicated hosting and not shared hosting.
Log into your account using SSH
Install node.js and npm on the server
Upload your build files to the server
Run the command to start your app in production.
These steps look easy but are a bit complicated. If you are a newbie who just started working on react, I will advise you not to bother yourself with these steps. You can easily get your react app working in less than 10 mins with a cloud service like Heroku for free too.
I have my website setup and working by modifying the universal-starter seed found here: https://github.com/angular/universal-starter and I have got my site working (rendering HTML) on the localhost node server, now I have a SSH connection and node installed, now I am here:
And I am not sure where I put my /dist files etc and then start the nodejs server.
NodeJS/npm installed shown here:
Edit (3/23/21): Something to be aware of when using Universal
You really need to consider writing blocks of code specifically for the Browser or for the Server. For example:
You might use an external SAAS solution (like SharpSpring or Google Tag Manager) to help your team track leads and generate automatic workflows.
Some of these services require you to write objects to either the window or document objects. Because your server isn't running javascript, there isn't a way to get these objects to behave like they would natively when running your application on the server. You will need to really mess around with these things.
A really helpful article I found was this demo of real app problems using Angular Universal.
You will also need to dynamically append imported scripts to your index.html header. I have seen this same concept a couple of different places, but here is one as well. There might be a stack overflow answer that has this same idea.
However, in some instances, you will need to use a library or something (like Postscribe) to dynamically add scripts to individual components inside of one of your html template files. Postscribe helped us drastically by allowing us to dynamically import a specific script in front of a form in one of our components. I highly recommend using Postscribe.
So, long story short, you will need to make sure you are importing scripts and appending them to your index.html file only if your application is running in the browser. Do this check for all external JS files as well that you are importing into your application and using directly. Start by injecting PLATFORM_ID into whatever component you need to make this check in, and using it that way
This applies to all kinds of things like animations (which might be listening to a window scroll event), etc.
Original post below:
#Cacoon I hope this is what you did.
This first part is an existing answer from m98 on this Github issue. Just posted here for clarity
Build your app: npm run build:ssr
Move the dist over to your server
install PM2 npm install pm2 -g
On your server, use PM2 to run the server bundled app pm2 start dist/server.js
If you're using Nginx, or other web servers, make sure to redirect requests to the port that the app started with PM2 is listening on.
UPDATE (2/7/2020)
For Apache make sure your document root is specified as your dist/browser folder like
DocumentRoot "${SRVROOT}/htdocs/dist/browser"
<Directory "${SRVROOT}/htdocs/dist/browser">
And try this in the bottom of your httpd.conf file:
<Location />
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]
RewriteRule ^ /index.html
</Location>
<VirtualHost *:80>
ServerName localhost
ServerAlias localhost
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / http://localhost:4000/
ProxyPassReverse / http://localhost:4000/
</VirtualHost>
<VirtualHost *:443>
ServerName localhost
ServerAlias localhost
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / https://localhost:4000/
ProxyPassReverse / https://localhost:4000/
</VirtualHost>
You have to set the virtual host in the httpd.conf, and not in a .htaccess file. You can set Mod_rewrite at the same level of your index file in an .htaccess file, but you cannot set virtual host at that level.
Also, make sure you enable the modules for the proxy, like mod_proxy_express in your httpd.conf file
This is for developing locally. Change localhost to your domain when deploying to prod.
This was actually easier than it seemed, I just needed to install pm2 with npm so I could make the nodejs process constant, then use RewriteEngine settings in the .htaccess file where I wanted to my angular universal application to render (it was in a subdomain folder) and ensure the port is correct and it linked perfectly and loads html in source allowing proper SEO and indexing
I used create-react-app to set everything up.
I was able to get a live version of it up on surge.
I now want to add it to my personal website that's hosted by Bluehost.
I need to upload it using an FTP Client.
https://codingforkids.us/projects/joesprojects/ravenous/
This is the result of running npm run build and placing the contents of the build folder into the FTP client. The page is blank.
Here's the app on Surge: http://ambiguous-afternoon.surge.sh/
There are multiple 404s for the css,js files your trying to server. Make sure the files are available on the host, and whether they are can be statically served.
The most likely problem is that you need to add an .htaccess file into the public directory prior to doing your build.
Check out the React article on deployment
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Also ensure you've set your URL in the manifest.json (also in public)
You may also have to do a hard refresh of your site.
I'm trying to get cakephp working locally on my mac - yosemite. I have apache and php working locally in my /~user/Sites directory... I can hit a php ini file ok and have an install of wordpress in another directory.
I've hooked it all up apart from getting the urls rewriting... I followed the steps on the cake site:
http://book.cakephp.org/2.0/en/installation/url-rewriting.html
Now all I get is 404 not found!.
The three .htaccess files have the default content with an additional RewriteBase pointing to the folder its installed in, in my Sites folder.
Any ideas what I'm doing wrong? I've read the other posts on this and none of them helped!
Thanks
First, confirm mod_rewrite is enabled by (on command line):
# a2enmod rewrite
If it just got enabled using the command above, restart apache:
# /etc/init.d/apache2 restart
These types of errors should hit your error.log .. while trying to load the site, hold the error log open:
# tail -f /var/log/apache/error.log
and try to access your page again.
If this doesn't help you solve the problem, paste in your rewrite rules so we can take a peak.