Display git tag (version) on my app's login page in react

git push tags
git checkout tag
git show tags
git describe
git tag vs branch
git push all tags
git tag -a specific branch
git version number in source code

I want to display the current git tag on my app's login page, Its built using react. Im trying to use the 'git-rev-sync' library to do this. but it doesnt seem to work on the client side because I keep getting errors like 'cannot find module 'children process', it works on the server side where Im able to console.log and print the tag anyone know how to achieve this? Open to any solutions with any library

import version from 'git-rev-sync'
...
class Login extends Component {
...
render ()
...
return (
<div> my version: {version.tag()} </div>
) }

Thanks

I decided to use git-revision-webpack-plugin which creates a VERSION file (among other files) in the dist folder, and then I read the file from my client side react app: add this to your webpack.js:

const GitRevisionPlugin = require('git-revision-webpack-plugin')

module.exports = {
  plugins: [
    new GitRevisionPlugin({
      lightweightTags: true //I added this to get the tags as well
    })
  ]
}

then my client side looks like this:

  const [revision, setRevision] = useState('')

  const fetchRevision = async () => {
    let result = await fetch('/dist/VERSION')
    let txt = await result.text()
    txt = txt.replace(/^(.*?)(?:\-.*)?$/, '$1') //I only care for the tag.
    setRevision(txt)
  }

  useEffect(() => {
    fetchRevision()
  }, [])

and then you can render the revision

One thing to notice, depending on your server, you may need to tell it to serve this VERSION file as is, so for example in express, you might find you need this:

server.get('*', (req, res, next) => {
  if (/^\/dist\/*/.test(req.originalUrl)) {
    const relative = req.originalUrl.replace(/\/dist(\/.*)/, '$1')
    const filename = path.join(compiler.outputPath, relative)
    compiler.outputFileSystem.readFile(filename, (err, result) => {
      if (err) {
        return next(err)
      }
      res.send(result)
      res.end()
    })
  }
  ...
})

Hope this helps for future use.

Display git tag (version) on my app's login page in react, If you used create-react-app@0.2.3 > to generate your app. create-react-app scripts use environment variables that start with the REACT_APP_� $ git tag -a v1.4 -m "my version 1.4" $ git tag v0.1 v1.3 v1.4 The -m specifies a tagging message, which is stored with the tag. If you don’t specify a message for an annotated tag, Git launches your editor so you can type it in.

If you used create-react-app@0.2.3 > to generate your app.

create-react-app scripts use environment variables that start with the REACT_APP_ symbol in the root .env file. create-react-app - Adding custom environment variables is a good place to dig into the details.

or just include the following in your .env file.

.env

REACT_APP_VERSION=$npm_package_version

and access it on your react login component by referring to {process.env.REACT_APP_VERSION}

Tagging, git tag -a v1.4 -m "my version 1.4" $ git tag v0.1 v1.3 v1.4 You can see the tag data along with the commit that was tagged by using the git show command:. git tag -a v1.4 -m "my version 1.4" Executing this command is similar to the previous invocation, however, this version of the command is passed the -m option and a message. This is a convenience method similar to git commit -m that will immediately create a new tag and forgo opening the local text editor in favor of saving the message passed

The simplest way I can think is updating your package.json every time you release a new version of the app, and then reading it on your render method:

import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"

Getting the version directly from Git may not be the best option, as the git command could be unavailable in your server; and I don't think it would work/be a good practice to checkout other tags while the app is running; so the package version would be sufficient.

How to Version Web Apps With Git Describe and a View Helper, Git Tags provide an excellent, direct, and simple way to mark the code when a specific version gets released during the development life cycle. Lets write a script that will get the Git hash and the version from the package.json. This looks something like this: Lets hook this script up to run on postinstall of our application.

Using Git Tags To Version Coding Tutorials, We can use the git show command to view the tag data. $ git show v2.4 tag v2.4. Tagger: Emma Wedekind <wedekind.emma@gmail.com> Date:� $ git tag v5.5 v6.5 You can also search for tags that match a particular pattern. $ git tag -l "v1.8.5*" v1.8.5 v1.8.5-rc0 v1.8.5-rc1 v1.8.5-rc2 Getting latest tag on git repository. The command finds the most recent tag that is reachable from a commit. If the tag points to the commit, then only the tag is shown.

Update your web app version dynamically with git-describe, Git tags help you to mark a point in your git history, we use this to mark our code/ software version. git describe is a git command that display the� (I searched for this too in June 2012). I have a rake task that does a deploy, part of it sets GIT_TAG and my web page (application layout in rails) prints that to the page. Heres how I write to the Heroku GIT_TAG config var (using a Rails-based Rake task): tag = `git describe master --always`.strip `heroku config:add GIT_TAG=#{tag} --app XXXX` 2.

How to retrieve a Git hash for my app version � GeekCafe, It's popular to display your current git commit (or tag) as the version of your application. So then how does one go about getting that information� 🔍 Tag. List all tags: git tag. Tag a commit: git tag -a 1.4 -m "my version 1.4" Delete remote tags: git push --delete origin tagname git push origin :tagname. Push tag to remote: git push