CSS is looking different on heroku - css

As you should see in the images below, the css on my local host site is spaced much better at the top than it is on heroku.
Has anyone had this type of problem before. You can see it best on this page http://pltcpal.herokuapp.com/forums/
I'm using Twitter bootstrap, which recommends adding
`padding-top: 40px;`
to body if using the top nav bar. Somehow it's not working...

The problem is related to the handling of the asset pipeline on Heroku. There are several ways on how this can be handled, see http://devcenter.heroku.com/articles/rails31_heroku_cedar
I fixed the issue in my application by pre-compiling the assets locally on my machine and then pushing them to Heroku.
Pre-compile the assets:
RAILS_ENV=production bundle exec rake assets:precompile
Add/commit the changes to git repository:
git add public/assets
git commit -m "vendor compiled assets"
To be safe I tested the whole thing on a local branch on my machine first which I pushed to Heroku using the following command (Heroku normally ignores all branches except the master branch, thus the trick):
git push -f heroku heroku-assetpipeline:master

FWIW, I had this same issue and checked everything I could think of, as well as those above. It turned out I must have zoomed out in my browser while on localhost, and I had the standard zoom on my production url.
It was as simple as resetting the zoom in my browser on both pages. Hope this helps someone else with the same problem.

I have the very same issue.
When I compare the development and production code, it occurs that on the development machine the stylesheets and javascript files from bootstrap all get loaded whereby on the production site (Heroku), there is only one application-XYZ.css and one application-XYZ.js.
I am not sure if this could be an issue with the asset pipeline.
Could probably someone elaborate on what needs to be done to (pre-)compile the asset pipeline such that deployment on Heroku succeeds.

Is it possible that you pre-compiled your assets locally at some point? To force heroku to compile your assets during slug compilation you can rename your public/assets/manifest.yml to public/assets/manifest.yml.bak, commit your source, and push to heroku.
Heroku assumes you compiled your assets locally when it sees the manifest.yml file.

I had this same problem and followed the instructions of a couple of different pages including Heroku's own documentation. I'm posting here to help the next guy because possibly due to changes in Rails 4, Heroku, or Github but the above directions did not work at all for me. However I did get it to work and here's how.
Yes you probably should precompile your assets using RAILS_ENV=production bundle exec rake assets:precompile but after that go into you 'public/assets' folder and copy "all" '.css','css.gz', '.json', '.yml', '.js' files that start either with 'application' or 'manifest'. Move them to a folder outside of the application's directories. Do this just encase anything goes wrong. Verify all of those files are deleted from the apps 'public/assets/' folder. Next restart your local rails server and verify your app is still behaving as you intend it to. Then go to your Github account and go into the 'public/assets/' directory of your repository and delete all the same files that you just did locally. Then add/commit locally, then push to git, then to heroku, and walla you're done it should be working.
The rationale behind it, what I assume, is because when you push to Heroku it checks for compiled assets in your repository and because of this, even though I had precompiled locally, it was still pulling some asset configurations from previous commits. By removing these files, Heroku must compile them during the push. One thing I didn't try which may work is just switching to another branch and deleting those files and deploying that branch to Heroku, so you may want to try that first, but this is what worked for me.
One other note, renaming the files to .bak or .old Heroku still considered them as their regulars and displayed them as it was the original ones that were not displaying properly.

Related

Empty css after heroku deployment

I am not familiar to heroku. I have a rails app working fine on local. When I deploy it on remote, I get no css loaded. I can see the css file in my console, but it is empty.
I am using Rails 5 and ruby 2.4.6. Does someone has an idea ?
The most probable reason for this is the fact that in the local environment, the assets can be retrieved directly from the asset pipeline/webpacker.
On heroku the app server is running on production environment and only loads the compiled static files for js/css/images/fonts.
Try running the below code from your console.
heroku run rails console
rails_env=production rake assets:precompile
heroku restart
P.S In case this does not work there must be a setting in production.rb called fallback to asset_pipeline something like this. Set it to true. Not recommended though.

Deploying to a production environment with Symfony Flex and --no-dev

I have a couple of large Symfony projects, and have noticed that after updating everything to Symfony 4 (Flex), when our deployment automation runs its normal process of:
composer install --no-dev
We end up with (for example) this:
Symfony operations: 2 recipes (72fad9713126cf1479bb25a53d64d744)
- Unconfiguring symfony/maker-bundle (>=1.0): From github.com/symfony/recipes:master
- Unconfiguring phpunit/phpunit (>=4.7): From github.com/symfony/recipes:master
Then, as expected, this results in changes to symfony.lock and config/bundles.php, plus whatever else, depending on what was included in require-dev in composer.json.
None of this is breaking, exactly, but it is annoying to have a production deploy that no longer has a clean git status output, and can lead to confusion as to what is actually deployed.
There are various workarounds for this, for example I could just put everything in require rather than require-dev since there is no real harm in deploying that stuff, or I could omit the --no-dev part of the Composer command.
But really, what is the right practice here? It seems odd that there is no way to tell Flex to make no changes to configuration if you are just deploying a locked piece of software. Is this a feature request, or have I missed some bit of configuration here?
This was briefly the case on old Syfmony Flex 1 versions.
It was reported here, and fixed here.
It this happens to you, it means you have a very old installation on your hands, and you should do your best to at least update Symfony Flex to a more current version (Symfony Flex 1 does not even work anymore, so switching to Flex 2 if possible would be the only way, or simply remove Flex in production).
If you deploy to prod from your master branch, you can setup a deploy branch instead. And in that branch you can prevent certain files from being merged in. See this post for more detail. This creates a situation in which you have a master branch, a version branch (example: 3.21.2) and you're having devs checkout master, work on it, then merge their changes into the version branch. From there you pick and choose what gets deployed to prod. (There will be a small balancing act here. You'll want to merge all dev changes into master until it matches your version branch and make sure master matches the version after you've deployed. This adds a bit of work and you have to keep an eye on it. etc.)
Another option is to separate your git repository from your deployment directory. In this example, a git directory is created in /var/repo/site.git and the deploy directory is /var/www/domain.com and a post-receive git hook is used to automatically update the www directory after a push is received to the repo/site directory. You obviously run composer, npm, gulp, whathaveyou in the www directory and the git directory is left as is.
Without getting into commercial options such as continuous deployment apps, you can write a deployment script. There are a lot of ways to write a shell script that takes one directory and copies it over, runs composer, runs npm, etc. all in one command -- separating your git from your deploy directories. Here's a simple one that makes use of the current datetime to name a directory then symlinking it to the deployment directory.

Use Git in SSH to pull specific directories

Total newbie question but what is the best practice when it comes to using SSH with Git? I'm working on a WordPress project. In the root I have gulp and other dev files/folders like SASS and Scripts that I don't need on the server and in the same project I have my WordPress folder that contains a theme and a few custom plugins. As you can imagine when the theme or any of the plugins are ready to be deployed I don't want to pull everything in my repository on the server. So far as a newbie I've always just pull and pushed the entire repository and used FTP to upload what I need to the server, so how is this done with SSH and Git and is there a better way to have my setup?
EDIT: To make my question a little bit more clear let me give you an example of what I think my issue is. In my main project folder, I have a SASS folder next to my WordPress folder. All I really need to deploy to the server is the WordPress folder. My build process that happens on my dev machine combines all of the SASS files into a single CSS that is then placed into the WordPress folder. I need the SASS folder to be tracked by Git so that any other developer can pull them and continue developing so I can't have git ignore it. However none of those SASS files need to be on the server for WordPress to work either. I just simply need to deploy the WordPress folder and everything that's in it.
I understand the idea of creating a bare repository on the server and using post-receive hook to point the git folder sitting outside your web root to point to where the web root is. But that's basically how GIT and SSH work and that's not answering my concern.
Not with Git
Git is not designed to pull specific files or directories only. It's a directed acyclic graph with binary blobs as objects and sometimes multiple objects get compacted into a single larger object.
Due to Git design, your specific request is not possible.
Alternatives
post-receive hook
If your website only contains simple static files then it's okay to push to a git repository over SSH. In reality, it's unlikely your repository will be large as long as you don't have non-text files.
Take for example the following setup.
/var/lib/www - apache web dir which is the cloned copy of www.git
/var/lib/www.git - a bare git repository.
/var/lib/www.git/hooks/post-recieve - A server side git hook. It can be a shell script that pulls the www repository when this repository is updated.
Sample post-recieve hook script:
#!/bin/bash
cd /home/sam/sandbox/git-hooks/www
unset GIT_DIR
git fetch origin master
git reset --hard origin/master
Zip up build in a tar.gz
At the end of your build you can zip up your files in a tar.gz. This file should be hosted somewhere (perhaps GitHub releases if you're using GitHub). Some enterprises use on premise artifact hosting like Nexus or Artifactory.
The idea being: you have a tested artifact that has a specific sha256sum. The artifact you test is the exact same artifact which eventually goes to production.
Diving into more detail such as continuous integration, continuous delivery, and the software development life cycle might be out of scope for your question.
No best practice.
Git is for source control, not for deployment. There is no best practice for using git this way because git is not a deployment tool. You also don't need git history on your server. In fact, you don't need git at all unless you insist on using it for deployment. You are welcome to use it this way but it's not ideal because of exactly the kind of problem you're asking about.
What is the best practice?
There are a number of tools you could use to handle your deployments. Most of the tools generally let you set up a series of steps that let you deploy the code you want into the environment you want. You could go with simple tools such as Phing or Deployer in the PHP world, or something more sophisticated like Puppet or Chef if you have more complex needs. You could just write your own bash scripts if what you need is really very simple. I recommend Phing or Deployer given the info you've provided. https://deployer.org/ https://www.phing.info/
You'll just configure whichever tool you want to ssh into your target box and copy over only the files you want into the directory you want on the server, in whatever way you would like to do that. Usually, you have the script copy files into a temp dir, tarball them up, ssh them over and untar them. After that, you'll usually do some additional work on the server to move files around, change symlinks, whatever else you might need to do.
What about compiled SASS, ES6 js files, or modern static stuff?
All you need to do is add steps to the handle the static files and where you want them to go. Include the generated static files in your tarball when you push stuff up, and put them in the right directories in the server once you untar it.
When you configured your SASS compiler, and whatever other pre-compiled static code you may have - you configured it to create a destination file. That is, the file(s) of actual CSS and JS that they generate. That's all you need to bring along - and if you have the destination directory set to be inside your wordpress theme, you may not even have to pay all that much special attention to it's handling. You may need to move them somewhere else once they are on the server but that all depends on the specific setup in your server, which I think is outside the scope of this question.
Additional Notes:
You didn't ask about this but I thought it was worth mentioning, that you shouldn't be sending the entire wordpress repository every time you update. Just like you don't need the uncompiled SASS code, you also don't need to be repackaging core WordPress. You don't even need to be commiting core WordPress, its a dependency and you don't need to be changing it.
All that should be getting committed by you is your theme and plugin code, and the uncompiled static files. Compiled static files and external dependencies like the WordPress core don't belong in your git history. For deployment purposes, WordPress should already be installed. The stuff in your tarballs should just be plugins and themes, and additional static files if they aren't already in there for some reason.
TLDR;
Don't use git for this. Use a tool like Phing or Deployer. Build your static files into your theme, and create phing/deployer scripts that tarball up only the code you want, SSH's it over to your server, and untars it into the directories you want. If you have some special location on the server for your static files, just make sure to add steps in your script for that.
So, based on your question and comment, there are three computers involved. There is a web server (when you say "server", I take it as a Web server in this scenario, or the server computer that runs a Web server program). There is another server where your git repo is hosted. And, there is your dev workstation. Is this correct?
It seems like, you have a cloned git repo on your Web server. Your current practice/workflow appears to be (1) (based on your expression "SSH'ed into my server") you log into the web server via SSH (just like Telnet) from your workstation (SSH is just a protocol, which can be used for different purposes). (2) you pull from your repo on hosted service (e.g., github), and (3) deploy it to your "www" directory on the same server. Is this correct?
(I can think of an alternative scenario based on your use of the word "FTP", etc., but let's focus on the above scenario, for now.)
Now, your question is, whenever you "pull" (on your Web server), you feel like you are pulling everything from your repo on your hosted service. And, is there a better way? Am I understanding your question correctly?
If so, as another commenter suggested, git (and, any version control system, in general) is very good at fetching "deltas" only. If you are worried about "fetching everything" every time you pull (the step (2) above), then your worry is unfounded.
Now, the question is, why do you have a git repo on your Web server, if that is indeed the case? This is a pretty legit setup and I've done this before (e.g., on EC2). But, as a best practice, people generally don't do that on "production" servers. It's because you have to "build" your web app, and you really don't want to do that on production servers.
The next question is, what do you exactly do in Step (3)? The build process (whatever process you use) typically generates an "output" which can be directly deployed to the web server. (The convention is the output is generally a single folder, "public", "www", "dist", or whatever, or a single file (e.g., tar.gz, zip, jar, war), etc.) Regardless of whether you build the deployable output on your dev workstation (or, a build machine) or on your Web server, you don't generally do "deltas" in this context. Even if you've only changed a single file (say, a CSS file), you generally build the whole output again (instead of, say, just replacing the changed CSS file only). When you use FTP to upload files, etc., you can selectively upload certain files and/or directories, etc., but as a general practice, we don't do that. We always build the complete output from scratch and deploy it to the Web server. (This is mainly to reduce the potential deployment errors and increase the reliability.)
So, to answer your question, (A) If you are pulling git repo on your Web server, you should really change that practice, and move the build process to your dev computer or a dedicated build machine. (BTW, services like github, gitlab, TFS, ... provide the build service for you.) (B) If you are currently selectively FTP'ing your web app files to your Web server, then you should really consider adopting some kind of formal build, and deployment, process moving forward.
After your SASS build process is done use scp or rsync to move the files to the prod server:
scp -r /[local wordpress dir]/wp-content/themes/your-theme/ username#your.prod.server.com:/path/to/dir/wordpress/wp-content/themes/
scp -r /[local wordpress dir]/wp-content/plugins/* username#your.prod.server.com:/path/to/dir/wordpress/wp-content/plugins/
I am working in a project and using git ssh with bitbucket following is the process i am using it may work for you also if not please correct me :
Step 1 ->I have setup git and create repo in bit-bucket.
Step 2 ->And setup project with my local and linked with my repo.
Step 3 ->connect my server using ssh.
Step 4 ->Work in my local and commit and push all changes in my git repo.
Step 5 ->Run git pull on ssh so all changes deployed in my server.
I am using above process and i love this process.i have used .gitignore file that is not required for push on my repo.
Thanks

creating git repositories from live [wordpress,magento] sites, ignoring core php files, but be able to clone the repository on multiple local servers

So I have a lot of websites, 150+. Starting with the bigger sites I am beginning to set up git repositories for tracking the changes to these sites. I can create a localserver version of a site and set up the repository and everything is running fine.
I have set up a .gitignore file to ignore all the core files and plugin folders etc. Again this is fine, the files are still on my local machine and have been deleted from my repository.
What I want to do is set up this repository on multiple computers (my colleagues who do less development work but will still need access to the repository). I imagine cloning won't work as all the core files are no longer in repository. How do I get around this?
Thanks all!
EDIT:
I should have mentioned we're using BitBucket to act as a central repository if that makes any difference.
There are few ways you can do that.
You can set local environment in one location, and keep git repository in other location.
After cloning or pulling the repository you can then run script which will copy the files from repository to the local environment.
You can add all files to the repository ignoring only var/, .htaccess, app/etc/local.xml and .gitignore. Bare in mind that you can break a website by changing files which should not have been changed. Debugging then becomes a nightmare. Having all in git, you know instantly what went wrong.
We've managed to set up great workflow using beanstalk.com. They've got option to share repositories (like github) and then deploying them on different server through SSH. Works like a charm - highly recommended.

Git pull from heroku

How do I pull from heroku?
I have wordpress running in my heroku app and i changed some stuff via the template editor.
I'd like to have these changes also locally.
When i try to pull from heroku i get the message:
Already up-to-date.
But I don't have these changes locally
It's normal to get the Already up-to-date message, since the remote changes weren't commit and pushed.
Since you cannot commit and push from Heroku, you need work locally and then deploy. And that's how you should work at first place.
What did you change with the template editor? Probably configuration, and not code right? So if you do a pull from Heroku, you're not going to see changes? (I'm not familiar with wordpress - but I doubt the template changes result in code changes). So I guess I'm hypothesising that it's right: there are no changes.
Perhaps what you really want are database changes?
By the way, you can now clone a Heroku app with the new heroku git:clone
What does git branch -r --no-merged return? If it returns any branches, it means those branches have changes you don't have in the current branch yet. Merge them to get the changes.
Otherwise, the thing you are pulling does indeed not have any changes. That can mean that the changes you are looking for in another branch.
What you might want to do in that case is git fetch <heroku> where heroku is the name of the remote pointing to the heroku repository. That'll fetch all banches from heroku, which you then are able to merge.

Resources