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
I have a project in gatsby which uses Node.js/express for backend with MySQL.
Now, I know that all I have to do is gatsby build and that will create the static html/css/js files for me in the project/public folder and I can paste all of them in public_html folder and that will work(it is working), but Im confused about the database thing:
My issue is that in the gatsby-config.js when I change the mySql connection from localhost to the hosted db settings such as:
(The commented one is the hosted db configurations)
If I run gatsby develop while uncommenting the code. It says No such DB Error(obviously). So How can I configure the db settings here and also in the gatsby-node.js file to connect the db with the project?
I know this might sound like a dumb question but please help as I'm confused about what to do next.
Thanks.
Okay! Spent a lot of time on this. Hope it will help others.
Static Gatsby site
If you're trying to host a static gatsby site on any shared hosting. By static, I mean just plain gatsby styled pages,
You can do as the gatsby doc says:
Run : gatsby build or npm run build.
According to gatsby:
Gatsby will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.
After this : try npm run serve.
According to gatsby :
Gatsby starts a local HTML server for testing your built site. Remember to build your site using gatsby build before using this command.
serve will test your build files(newly created files in yourprojectroot/public dir)
This will run your project(using the build files) on a test server(localhost:9000) to basically test your build files.
Test this localhost:9000, If everything is working good. You can go to your remote cPanel and paste all your build files into the public_html folder.
Head over to your domain and you're good to go.
Gatsby with MySQL and Node/express
If you are trying to host your gatsby site which works a little with node and mysql as well and you are a newbie in hosting like me, Here's what you'll want to do:
Try both the points mentioned above. (Build your static files and try serve)
Setup your db on the remote as well with the same name dbname, username and password as your local one.
Two extra things:
Now, what you are going to do is to run both the node and gatsby(webpack) servers on the same port (say 8001). So we are going to use only the node server and serve all our gatsby files(build files) as static content to node server.
In your node file, add:
app.use(express.static(path.join(__dirname, 'public')));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname,'public/index.html'));
});
As you are going to run all your gatsby pages through index.html the last get('/*'... (above) will take care of all the pages request. Change the path public according to your remote folder structure
Add the build files along with the node(server connection) file in the public_html folder on remote.
Next add or change your .htaccess file (in the remote) to :
RewriteEngine On
RewriteRule ^$ http://127.0.0.1:8001/ [P,L]
RewriteRule ^(.*)$ http://127.0.0.1:8001/$1 [P,L]
So when you run your node file through the server's terminal, instead of yourdomainname.com:8001 the above mentioned .htaccess will redirect it to yourdomainame.com only
All done.
Your public_html now should contain the build files,a node/express conn file and .htaccess file.
Now, just go to your terminal. cd into public_html and run node yournodefilename.
You can head over to your domain now.
Note : You can use pm2 package to keep your node server always running.
Hope it helps somebody.
You should use environment variables to switch between configurations (locally and production). Environment files are files that store sensitive data such as API keys, tokens, etc, so they must be ignored and untracked to avoid pushing critical data to a public repository.
By default, Gatsby uses .env.development and env.production respectively for gasby develop and gatsby build commands, of course, you can override this behaviour but, assuming the default configuration, you should add the following snippet to your gatsby-config.js:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
Then, you need to create a .env.development and .env.production in the root of your project with the following content:
DB_HOST:yourHost
DB_USER:yourUserName
DB_PASSWORD:yourPassword
DB_NAME:youDatabaseName
Of course, each file should have different variables if you want to switch between databases or configurations.
Add them to your gatsby-config.js:
connectionDetails:{
host: process.env.DB_HOST
user: process.env.DB_USER
password: process.env.DB_PASSWORD
database: process.env.DB_NAME
}
The final step is to add, in your host, the environment file in order to make them accessible by Gatsby. S3 by Amazon allows to configure them but I guess that it's a common configuration for the hostings.
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
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.
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?