Deploying Angular 6 app to linux shared hosting (Apache server) - linux

Not trying to duplicate the existing questions on "Deploying Angular apps"
I am trying to deploy an Angular 6 app to shared hosting on go daddy.
I see a blank page after i upload the files to public folder
I have tried the following troubleshooting steps
1. https://angular.io/guide/deployment#production-servers
2. https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2
3. Unable to deploy Angular 5 using dist folder in WAMP server
4. I have tried changing the path on <base href="./">
5. Used the ng build --prod command to create the files in dist folder and uploaded them aas it is to the public www folder then created the .htaccess folder and rewritten rule as per angular docs
Any suggestions or help is greatly appreciated.
Thanks in advance.
Nothing seems to solve the problem.
Has anyone deployed an angular2+ app on godaddy shared linux hosting (apache server) ?

It was an issue with the routing.
I was routing using localhost as route URL.
It had nothing to do with the server setup

Related

how to deploy nuxt 3 on Plesk or IIS

how can i deploy nuxt 3 on Plesk or IIs on windows server.
what config needs to do this.
i appreciate anybody to answer me
i had transfer the .output file in httpdoc on my domain and below config on node js application
node js version : 18
Document root : httpdocs
Application Mode : production
Application Root : httpdocs
Application Startup File : entery.js
entery.js:
import('./.output/server/index.mjs')
when i see my domain in browser, result is this "import('./.output/server/index.mjs')"
my problem is solved
I deploy Nuxt3 on Plesk successfully via the below comment on GitHub by the author of Nuxt Poya Parsa
https://github.com/nuxt/framework/issues/9789#issuecomment-1361454980

Laravel Deployment all routes except / show 404

TLDR
I'm deploying a Laravel application to Directadmin with deployer's recipe. Getting 404 on all routes except /.
What I've tried
Manual Deploy
Initially I created the storage link Laravel requires between app/storage/public and public/storage
ln -sfn /home/myuser/domains/example.com/laravel/storage/app/public/ /home/myuser/domains/example.com/laravel/public/storage
For security I've placed the source files outside of public_html and created symlinks for the contents of public into public_html
/home/myuser/domains/example.com/laravel/
ln -s home/myuser/domains/example.com/laravel/public/* home/myuser/domains/example.com/public_html/
This kept leading me to all sorts of crazy errors during runtime like Whitescreens and route issues even though the deployment cleared cache and routes and followed Laravel deployment steps.
Deployer Script
Switched to Deployer's Laravel recipe and symlinked the each file and folder in current to public_html so I can have subdomains on the same domain. This worked the first 2 deployments round after some coaxing with permissions.
Then had route cache issues causing a symphony closure error. Which I solved by clearing routes and restarting the httpd server.
Next deployment all routes except / show 404.
What I've done this deployment
Reset permissions
npm run prod
php artisan route:clear
php artisan cache:clear
Checked .htaccess
restart httpd
Read most questions on Stackoverflow on 404's and routes [1] [2] which suggest clearing route cache and checking order of routes and typo's in route files.
One thing to note I'm deploying code that works in Dev on Linux PHP8. So there's no issues with the routes files. Deploying to the same Linux distro and same version of PHP.
Most of these steps are part of the deployment script anyway. But somehow Laravel finds a way to break on each deployment (even when it's scripted). Laravel is so temperamental!!
Anyone have an idea what else could be wrong?
[404 Routes Question][1]
[Another 404 Routes question with htaccess][2]
[Laravel Api routes does not work][3]
[1]: https://stackoverflow.com/questions/14160202/laravel-debugging-404-routes
[2]: https://stackoverflow.com/questions/24147460/laravel-all-routes-except-return-404
[3]: https://stackoverflow.com/questions/57400525/laravel-api-routes-doesnt-works-404

Only seeing Index of/ at domain even though index.js is present in the pubic_html directory

I've been driving myself a little mad trying to deploy this node.js and express app
I'm hosting on bluehost, so therefor, deploying via cpanel -
Currently:
Git repo cloned and deployed head commit success
Node app registered in app manager and Npm dependencies have been successfully ensured.
I after cd'ing into my repository directory in cpanel terminal I ran
/opt/cpanel/ea-nodejs10/bin/node app.js
and it was confirmed that
Server running at http://127.0.0.1:3000
Then after logging into whm root I ran
curl http://127.0.0.1:3000
And am returned with my index.ejs file , which seems like a good sign.
However, when I go to my domain -- deltadesigns.co
All you can see is :
Index of /
Name Last modified Size Description
DeltaDesigns22/ 2021-02-27 06:23 -
cgi-bin/ 2021-02-19 03:00 -
DeltaDesigns22 is the repo with all of required files and folders, public, views, app.js cpanel.yml etc.
I can't figure out why it's not working, feel like I'm so close but am just missing something! All help is appreciated!

How to host a Gatsby+Node.js project on a shared hosting?

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.

Beginner - setting up local host for Angular app using XAMPP on Windows 7

I have taken a Angular App which works on Local host when I use visual studio IIE server.
I don't want to use Visual Studio and I am trying to test the app locally using XAMPP.
I am a complete beginner, and I cannot get the local host to pick-up the html initialization file. I have checked the following:
Skype is off and the port is set to 80 in XAMMP
the root server in HTTPd.conf is setup correctly (no slash at end)
I am getting a little confused as to 'how' angular will work on the XAMMP local host.
Do I need to get Yeoman or grunt (seen these apps in some posts, but they seem to be for command line environment).
Any help, or even a pointer to a step by step set-up would be great!
Angular is no different from a normal html web page, when it comes to working in a localhost.
Does your XAMPP work with standard HTML files?
Do you have any error generated?
OK. Got this sorted. I was over complicating things entirely, angular runs sweet on regular XAMPP, no Grunt/ Yeoman etc. required.
All you need to do is: 1. install XAMPP 2. Close Skype 3. Place you app, libraries and everything else in the folder C:\xampp\htdocs\
localhost/Angularappstartpage.html
BOOM!
it works.
You may need to adjust the port number on the localhost (default is 80 e.g. localhost:80/...)
You can also change the root folder in your XAMPP config setup to point to your local GIT.
Do this by changing the line in the HTTPD.conf file (click 'config' on the apache module)
DocumentRoot "C:/xampp/htdocs" to DocumentRoot "C:/myLocalGIT"
Hopefully this will help all the new guys out there. Good luck!
Skype blocks the port 80, which is used for browsing. XAMPP uses the same port so exactly.
https://support.skype.com/en/faq/FA148/which-ports-need-to-be-open-to-use-skype-for-windows-desktop
If you use mysql, also open first XAMPP and start your services and then keep working on your SO as always.

Resources