I am trying to create a Javascript component that replaces the static HTML element Demo v0.1 into the shortened GitHub Commit Hash, e.g. 6da724d
<div className ="demo-version">
Demo v0.1
</div>
How to write the javascript code with git rev-parse HEAD to make it work?
The most correct way IMO would be to separate coding (in git) and deploy phases. During deploying you can do whatever you want with your code (replace strings, e.g) and the modified code doesn't clutter your repository.
If you insist on having the hash in source files in the worktree you could use clean/smudge git filters to do keyword substitution.
You can use a bash script to launch your application and pass an environment variable that will contain the git commit hash.
For example, an easy script for React could be
#!/usr/bin/env bash
set -e
HEAD_GIT_COMMIT="$(git rev-parse HEAD)" yarn start
Then since React uses node as the development server, you can access the env var via process.env.HEAD_GIT_COMMIT, although you might have some config to write depending on the bundler you are using, or CRA.
Depending on how you are deploying your application on different servers, you might need to adjust the script to make it work with different environments, but you get the idea.
Related
I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.
I'm currently trying to overwrite or change a value in my package.json from another file. Basically, package.json has a "homepage" value that gets built when I run npm run build. I wish to be able to change that value from my config.js or config.production.json files. I want my environment values all in the config files so it is easier to modify. However, when I run npm run build, it still loads my homepage value from the package.json.
package.json
{
"homepage": "/company/portal"
}
config.production.json
{
"configPath": "/newCompany/portal"
}
Thank you for your help
If you mean in general how to write a file in the client machine through a script in the browser, it isn't a thing allowed so easily and you will have also a lot of cross browsers issues implementing it by 0.
You could try to take a look to this library which seems quite good:
https://eligrey.com/demos/FileSaver.js/
You can also think to start an AJAX request to a node.js application for example which will write you the file easily on your system or provide a download, or in general to server side which will provide a file to be downloaded to the client.
But, from the case you explained, you just need to change the config file in your system, so considering you are using node.js, the easiest way is using node.js
It is usually strongly discouraged to put your env variables values inside a JSON file. It can seem that you keep things in order but most probably your code will be pushed somewhere and so opening the JSON file, anyone can see all your values of the env variables. And this is not a good thing.
In my opinion you should think to write your build script in order to take arguments when called, and then call the build passing the parameters. For example:
npm build --production
npm build --development
Depending on the parameters, you will set up the right configuration on the fly.
I hope this helps
To install the package with the atmosphere in meteor.js sufficient to use a single command. But let us assume that there is a need to edit a specific package for themselves. Now I needed to translate into another language package accounts-ui-bootstrap. Package code is in the appropriate folder in the directory .meteor. Everything works as it should, but after restarting the application server, all changes are rolled back to its original state. What should I do?
Just add a new JS or CSS file on your public/server folder depends the case, and overwrite it
I am in the process of converting an existing Rails 3.1 app I made for a client into a Backbone.js app with the Rails app only as a backend server extension. This is only a personal project of mine, to learn more about Backbone.js.
While setting up Backbone.js (using Backbone-on-Rails), I noticed I have some dependencies (like backbone-forms) that come from external sources and are frequently updated.
I've grown accustomed to using Bundler to manage my Ruby gems, but I haven't found anything similar for JavaScript files. I'm wondering if there is any way to do the same for Javascript (and possibly css) files.
Basically I can see three possibilities to solve this issue:
Simply write down all the sources for each JS file and check these sources from time to time to see what has changed.
Use some kind of existing "Bundler for Javascript" type of tool, I've been looking for something like this but have yet to find anything (good).
Since most of these JS files will be coming from Git anyway, use Git to get the files directly and use checkout to get the latest version from time to time.
I prefer the last option, but was hoping on some more input from other people who have gone this route or preferred some other way to tackle this issue (or is this even an issue?).
I figure the Git way seems easy, but I am not quite sure yet how I could make this work nicely with Rails 3.1 and Sprockets. I guess I'd try to checkout a single file using Git and have it be cloned in a directory that is accessible to Sprockets, but I haven't tried this yet.
Any thoughts?
You don't mention it in your alternatives, but ideally you should use something like Maven to manage your dependencies. Unfortunately, there are no public repositories for javascript files. This discussion lists some other options which might be of help to you: JQuery Availability on Maven Repositories
For now I've settled on using the Git solution combined with some guard-shell magic.
The steps I follow:
Create a dependencies directory somewhere on your local drive
Clone the repositories with javascript (or css) files you want to use in the app
Set up a custom guard-shell command to do the following:
group 'dependencies' do
guard 'shell' do
dependencies = '~/path/to/dependencies/'
watch(%r{backbone-forms/src/(backbone\-forms\.js)}) {|m| `cp #{dependencies + m[0]} vendor/assets/javascripts/#{m[1]}` }
end
end
Place the Guardfile at the root of the app directory
It takes some time to set things up, but after that, when you have the Guard running, and you pull changes into your dependencies, the required files are automatically copied to your application directory, which are then part of your repository.
It seems to work great, you need to do some work for each new file you want to include in the asset pipeline, but all that is required is cloning the repository in your dependencies directory and adding a single line to your Guardfile, for example for the backbone-form css:
watch(%r{backbone-forms/src/(backbone\-forms\.css)}) {|m| `cp #{dependencies + m[0]} vendor/assets/stylesheets/#{m[1]}` }
Also, the reason I added this Guard to a group is because I keep my dependencies outside the main application directory, which means guard normally doesn't check my dependencies directory. To make this work, I start up my main Guard processes using bundle exec guard -g main and use bundle exec guard -w ~/path/to/dependencies -g dependencies in a new terminal window/tab to specify the -w(atchdir).
Is it possible to compile a JS application and the NodeJS interpreter into a single executable for distribution?
you need a linux box with git and python, then ugly solution:
$ git clone git://github.com/ry/node.git
$ cd node
$ vim src/node.js # add your code to end before "process.loop();"
$ ./configure
$ make
$ sudo make install
$ node
Is it possible to compile a JS application and the NodeJS interpreter into a single executable for distribution?
This might sound obvious, but here's my take on it.
A "single executable for distribution" sounds a lot like an installer...
An installer would contain or be able to fetch online your js scripts and a compiled node.js. It would unpack everything and create a script in /etc/init.d/ to start and stop the server.
If all your clients are on the same distro (e.g. Debian), I'd just make a package for the appropriate packaging tool (e.g. apt) and let the package tool handle everything.
It the clients all have different distros, you could look into autopackage.
If your goal is to execute javascript, you might be able to create a simple C or C++ wrapper program which would spawn an interpreter and evaluate your JS. If you want a single file, the js source could be included as a string constant.
When you compiled the wrapper program, you'd want to statically link it to node and the rest of its dependency tree. Rather than depending on shared libraries on the system, static linking will copy the routines your project depends on into the compiled binary.
How you do this will depend on your environment