Reputation:
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.
Upvotes: 0
Views: 2273
Reputation:
Okay! Spent a lot of time on this. Hope it will help others.
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:
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.
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 inyourprojectroot/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.
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.
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.
.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.
Upvotes: 2
Reputation: 29320
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.
Upvotes: 1