Configuring .htaccess for React+Vite in Cpanel - .htaccess

I created a project in React.js and Vite.js and I want to deploy it using CPanel, but when get the content of the dist folder out to the root the app doesn't get .env variables, so I figured out that I need to keep content of dist folder inside of it and create .env outside for the app to recognize it.
But I couldn't figure out a way to configure .htaccess file to reference the files inside dist.
folder structure I have in Cpanel file manager
dist
| |___assets
| |___index.html
|
|__.env
|__.htaccess
I need some help please to get .htaccess to work or .env to be recognized

Related

How to set up the root directory for apache2 Server?

Im trying to publish my website for the first time (complete newbie in servers). Im using apache2 and the app is built with node/react/express.
The index.js file is inside myapp/packages/hotel/src.
what I did:
changed the root folder in /000-default.conf to "var/www/html/myapp/packages/hotel/src"
deleted the existing html folder with sudo rm -r html
made the git clone command sudo git clone www.xyz123.. html
When i open the website, there is "index of / " and the directories. The index of doesent even point to the src folder, its still inside the main directory.
What did i miss? It should load the index.js
Re. 1: Use an absolute path:
DocumentRoot /var/www/html/myapp/packages/hotel/src
Re. 3: Use git archive instead of clone as you don't want the .git directory to be served. If your intention was for index.js to be an app that runs on the server, then you want to use node.js instead of apache2 to serve it.

Hosting Multiple react app in cpanel on singe domain

I had delveloped an react application which I want to upload it to cpanel. I had my website also running on the same domain.
Example:
https://www.mywebsite.com host my web content for selling roses.
Now I want to upload my application(APP1) developed in node js as backend and reactjs as front end.
But in future I need to upload similiar other websites too. So I want to create a folder on root and inside or the root i want to upload my application (APP1).
In future if I develop another application(APP2) I want to upload it to same domain in another folder on root (APP2).
My folder structure will be as
Root
...WEBSITE FILES
...APP1
......app1_files
...APP2
......app2 files
Now how to deploy my APP1 and APP2 on my domain.
Go to the 'package.json' file in your React Application, add a package name ("homepage": "YOUR WEBSITE LANDING PAGE LINK")
Screenshot
Go to the terminal of your editor and type "npm run build".
Navigate to the Application folder, you will find a folder named "build", upload all the files to the website directory.
HOW TO MAKE A DIRECTORY?
Go to your cpanel > public_html (this will be your root folder): you can upload your files here.
If you want to make a directory or another application within the same domain just make a new folder inside public_html and upload the application within that folder and the application will be available by typing: YOURWEBSITE.COM/FOLDERNAME

Folder structure to deploy app on EC2 instance

I am setting up a new React app on EC2 instance (ubuntu). I have installed nodeJS and npm and I am able to build my app successfully.
Issue is my code is in /var/www/html folder and my site example.com is pointed to this folder.
when I run
npm run build
It builds a folder under /html like /html/build now my app runs on example.com/build. Resources for these files comes from example.com/static/style.css etc but they actually reside under example.com/build/static
I can edit asset-manifest.json and change the path but thats not appropriate solution as I need to get rid of /build folder for production
I am not super familiar with deployments to EC2 but this looks like you just need to either copy the entire contents of your app inside var/www/html, or you need to tell apache or nginx to look to the right folder (in this case /build)
For example, with apache you probably have a file inside /etc/apache2/sites-enabled/ that is pointing to /var/www/html, you could change that to /var/www/html/build and restart apache.
You can check this for examples on how to write these configurations https://gist.github.com/rambabusaravanan/578df6d2486a32c3e7dc50a4201adca4

How to host and access files on a Netlify site

I am using Netlify to host a github repo and am trying to find a way to host additional files on the domain.
( If you don't know what Netlify is check it out. It's a fast dirty and free version of AWS code deploy as far as I understand. (Disclaimer have not used AWS code deploy))
Example
Base Domain:
https://physiome-test.netlify.com/
Load a 3D model from
https://physiome-test.netlify.com/3Dmodels/heart/fullheart.json
Does anyone know if this is possible? I understand that they only provide 'static sites' but I don't see why that couldn't include file storage so that one doesn't have to worry about CORS
Netlify will host all static content in the folder you tell it to on deploy. You are currently telling Netlify to put your whole repository into the site starting at the root of the repository. This is causing issues with your relative paths.
You can go to any path in your repository at this time on your site and get a returned response of the file.
Solution:
Build your site into one build location and have Netlify deploy that location to the site. Any path relative to the root path of the location will be the root of your site.
1. Put the body assets under your simple_heart/models directory at simple_heart/models/body
2. netlify.toml (root of your repository)
[build]
command = "cp -r ./simple_heart ./build && npm run build"
publish = "build"
3. Fix your index.html in the simple_heart to reflect the relative paths from the root of simple_heart which will now be the root of your site with the build assets physiomeportal.js and physiomeportal.min.js at the root of your site.
note: To see this, run the command from the root of your site on a local build.

nodejs create/delete local file on windows azure website "local storage"

I created a generic nodejs/expressjs app and git deployed to windows azure website (not web role, or virtual machine).
The folder structure is typical of an expressjs app:
app.js
package.json
routes/
public/
views/
node_modules/
temp_data/
The app can happily create and write files to the temp_data/ folder using nodejs fs.writeFile('temp_data\\temp_file',...,).
These can't be called "local storage", and not sure about the life time of these files. But as the names pointed out, they are temporary files.
The question is that when I tried to delete these files using nodejs fs.unlink('temp_data\\temp_file',...), after fs.exists('temp_data\\temp_file',...), it failed.
Is that because I have permission to write a file, but no permission to delete a file from a deployed folder?

Resources