How to enable translatation support after creating JHipster Application - angularjs

I created JHipsterApplication - at the time of the prompt "Would you like to enable translation support with Angular Translate? (Y/n)" - I provided "n". Now application is created and I want to add translation support to my application. Is there anyway to add translation support after the application is created or enable something which is disabled at the time of creating the application?
I tried "bower install angular translate" but it still says Translation is disabled for this project. Language can not be added". Thank you for your help.

Edit the .yo-rc.json file in your project folder and re-generate your app using jhipster --with-entities, it will ask you for overwriting some files and maybe you'll have to merge some others.
Alternatively, after having edited the .yo-rc.json file, you could use also run the upgrade generator jhipster upgrade --force, it will handle your custom changes better.

Related

Semantic-UI Dependency Stuck on Ongoing Build on Azure Devops Pipelines

I have a node app and I am trying to build it on azure pipeline, but the build gets stuck at the selection where you have to choose between automatic or custom. Is there a way to skip this so it build perfectly?
image
According to the document, we can know: The first time you run gulp you will be greeted with an interactive installer, as far as I know, the pipeline cannot handle such interactive setup.
The easiest way to install Semantic UI is our NPM package which
contains special install scripts to make setup interactive and
updates seamless.
The install process will create two files: semantic.json stores paths for your build and sits on the top-level of your project, theme.config is a LESS file that exists in src/ and allows you to centrally set the themes for each UI component.
The installer will also create a special folder which contains your site-specific themes. The default location for this is src/site. For details, please refer to this document.
So a workaround I can think of is that you can run the npm install semantic-ui --save command locally, and then publish the generated files from the local to the azure repo.

How to build react.js apps at visual studio code?

I have created two apps using 'Visual Studio Code' and 'node.js.' I run them using command 'npm start,' and they show in the browser. I want to build them or deploy them so they can be used by anyone. It says there to use command 'npm run build.' How to do that, and what technique you use in order to build them?
It depends on what configuration you used for building the React app. If you used create-react-app, npm run build is the correct command for building it.
If you used a different configuration (e.g. webpack), you should use the relevant command for that configuration.
Either way, deploying it will be as easy as copy/pasting the build folder's content to the server you want to host it, after running the build command.
Visual Studio Code or any other Code Editor for that matter is not relevant. You can develop, build and deploy any React app using any Code Editor you want, it's just a matter of preference.
"Building" refers to the task of preparing (transforming, minifying, compressing, etc.) all the relevant project files so that they're ready for production (assuming that your build scripts are configured to do so).
"Deploying" an app is usually a separate task that will deploy (upload) your current project build to a development platform provider like Firebase, Netlify, Azure, etc. Note that you have to register with a provider and setup a new project on their end before your deploy your project.
Which provider you use is totally up to you. Also, you have to configure your current project once you've chosen your development provider. They'll provide instructions on how to deploy your project.
On a side note, keep in mind that you can configure your own npm scripts so that they run whatever you want. More about that here

angular ui-ace production build not working in a jhipster project

I have a created a jhipster project
"jhipsterVersion": "4.3.0",
I am using this library for a text editor in my project.
https://github.com/angular-ui/ui-ace
Everything works super awesome in the dev mode. But when I deploy on prod "ace" cant find its dependent js files.
mode-javascript.js
mode-html.js
theme-monokai.js
I am not sure how to configure angular ace to get those files on production
THIS IS NOT A JHIPSTER ISSUE, but I am tagging it, hoping someone faced the same issue.
Thanks in Advance
angular-ace bower.json file exposes only ui-ace.js file in its main property: https://github.com/angular-ui/ui-ace/blob/master/bower.json#L8 but instructions say you must include 3 files.
As JHipster prod build uses bower.json to know which file to inject in index.html, it results in your prod index.html having only ui-ace.js.
Ideally, you should report this to angular-ace author but as this project has not been changed for last 3 years, it's safer to fix it on your side. In fact, it'll be safer to use another project considering all the issues and pull request pending.
To fix it you must edit your app bower.json file and add a section for angular-ace to overrides main property and reference the 3 files. There is an example in your project bower.json for bootstrap: https://github.com/jhipster/jhipster-sample-app/blob/master/bower.json#L52-L56

Gradle for AngularJS Application

I´m pretty new to gradle and currently there is question that bugs me. The situation appears as follows: Based on a bower technology stack I implemented an Angular App. The app as it is doesn't change nor has it to be built in any way since there are just static javascript and HTML pages. In my opinion the used versions of angular, bootstrap and other libraries should also stay the same due to compatibility of the single libraries so these files also shouldn't change. Is this a correct behavior or should I get at least the latest build of the used libraries version as I deploy the application?
Also less is used in the application. Is there a way to compile the CSS every time I run the gradle build file or should I deliver just the compiled and finished CSS file?
As a result I´m also not quite sure if it's recommended at all using gradle to deploy an "static" angular application.
I hope someone out there can help me to answer the questions above. As you can guess, I´m not very experienced at deploying of such angular applications since this is my first project with this kind of problem.
This goes for all package managers, not just gradle but npm, gem, nuget, maven, whatever.
Use static dependancy version numbers. Otherwise you will end up finding breaking dependencies in QA or Prod rather than production.
This means you need to be aware of security fixes in your dependencies.
When you need a feature or fix in a new version of your dependencies, unlock the versions, rebuild and test in dev. Re-lock the dependencies and send to QA for verification.

How to package react-native application

I am building a sample react native application. Currently i am running it using the node server.Node server is serving the js file.
You can see this in following screenshot:
I want to shift to the option2, for this, if there is any change in the js file, i need to run the curl command manually.
Is there any alternative for this?
AFAIK there's nothing in place and this is work in progress. See:
https://github.com/facebook/react-native/issues/12
We plan on putting in some sort of build step that "compiles" the JS
source directly into a resource file in the app bundle. Obviously in
production you wouldn't have a server running nearby.
There's another bit of discussion here.
At the moment I think you're stuck with the curl option.
All this does is packing all your JavaScript together and writing it into a single file.
Option 1 has a small http server running, providing the latest packed file when you request it.
Option 2 takes the file from the local disk.
You can setup a tool that looks watches your project files and repacks everything if you make changes.
You can do this by yourself, using the packaging tool shipped with react-native (react-native bundle [--minify]) and re-run it everytime things changes using gulp (and gulp-watch).
Also you can use webpack as your packaging tool and use the --watch option. (see example)

Resources