I'm on Windows and develop meteor project. When i need to upload public media i put it in public folder. After compilation to production on vps server with ubuntu i have tar.gz file which extracting into bundle.
So there is no public folder in a bundle, and all preloaded media placing at web.browser and web.browser.legacy folders in this bundle with access urls like "www.example.com/image.jpg".
I tried upload images into these folders (web.browser and web.browser.legacy) but urls doesn't work with new files. The question is why? And how i can set urls for another folder on server out of bundle and make it public because of all files will be removed after rebundle ?
Meteor-Files package works ok with that. Problem was i couldn't find download urls for uploaded images, answers is here, thx for that.
Default url is "example.com/cdn/storage/Images/image-collection-id/orignal/image-collection-id.extension"
Related
When express server is started with SPA application index file and few other static files are loaded and some files throw 500 error
NodeJS server is running, and serving the static files from the correct folder. (This can be confirmed as it loads index.html and some other assets)
As seen from the network tab scripts.2d2e0c1a64a29c086e01.js, jspdf.min.js, favicon are loaded from the same static folder, but other js files are not loaded.
When error files are opened with full link (localhost:3000/main-es2015.b21fb6bfbdb8538cc020.js) these files are also loaded aswell.
The static folder contains the build files from angular 8.
Same issue when tried with nginx reverse proxy config.
Any help is much appreciated. Thank you
I found that the new URL wasn't allowed in the Content Security Policy list, once adding it everything works as expected. Thank you.
I had a similar error -- HTTP 500 when requesting an image from Express -- and corrected it by granting more permission to the static files. When the error was happening, the image file had permissions -rw-rw----. I used sudo chmod 666 public/static/*.jpg to change this to -rw-rw-rw-, and the problem was solved.
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.
when opened the index.html file normally image is displaying
when hosted on lite server the image is not displaying
here is the html code and all the files directory
getting get request 404 for the image file.
here is the bs-config file for the lite-server
is there any solution please...!
I guess if you remove .. from img src, like /src/images/... — it should work.
Paths should be structured keeping the root of your live-server in mind.
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
I have a problem that confuses me since hours. I have a small website with a chat application on an express server. On localhost there is no problem at all. Images load normally, css and js files ok, everything perfect.
But as soon as I push the code online into IBM-Cloud (ex-bluemix), images give me a 404. The rest of the static files do get served though, and the application otherwise works normally.
The file structure looks like this:
--client
--resources
logo.png
--scripts
loginScreen.js
--stylesheets
stylesheet1.css
index.html
--server
app.js
The server starts in app.js and in the code I've put this before initializing the server:
expressApp.use(express.static(path.join(__dirname, "..", "client")));
I had some small problems with filename casing which I detected after building a docker container, but this is resolved and shouldn't be the problem. Any ideas?
The Simple Cloud Foundation Toolchain was registering my commits in github successfully and triggered the auto-build and deploy.
All code changes were pulled normally by the bluemix server. But the filename changes not. So for example the file called Logo.png was renamed to logo.png locally. This change was pushed normally into github. But logging into the bluemix server with ssh revealed that the filename there remained Logo.png.
I had to change the filenames manually by $ mv and now it works.