The project generated looks pretty nice. But IntelliJ finds a socket.io/flash app in node_modules and tries to make a module out of that. But the app folder is not there.
Think this is based on the angular seed. Can't believe no one has tried to do this though.
Only option is to create an empty idea project and move all the folders there. Or else you'll have to use Webstorm.
Related
I know there are many articles on google about this but in some cases they are keeping react(frontend) + springboot(backend) together in a single war, but my requirement is different I want to keep the both wars as separate.
So what I tried till now,
Directly adding the react build folder in jboss->standalone->deployment but it does not work, it works on tomcat but not on jboss
Then I created a new dynamic web maven project and renamed react build folder and added it to maven project webapps directory and created a war, but after deployment its giving 403 error, and I am not getting why.
Here is a snapshot of my folder structure, pom file and error on browser
Please help regarding this have been stuck at it for days now with jboss
Is there any other way to do it, I will be happy to change my approach.
tried this also, did not worked
https://www.megadix.it/blog/create-react-app-servlet/
spring boot comes with default tomcat, you can exclude from the dependency
https://spring.io/blog/2014/03/07/deploying-spring-boot-applications
https://dev.to/jakmar17/deploy-spring-boot-on-wildfly-application-server-2029
I have the same problem and I haven't found a good solution. The best I found is to create a dynamic web project in eclipse. Copy the build files into webContent and use HashRouter instead of BrowserRouter with basename equal to the project name. Finally compile and generate the war. I hope the advice helps you.
this is my first post on stackoverflow. I'm writing because I couldn't find a clear answer to my question. I don't know if the title is the right way to put it but it's what I went with.
The Situation:
I'm creacting a single-page-application with react and intend to build the back-end with node.js and express.js, but for now it's just react. I used create-react-app to create the project and I'm using Firebase for hosting.
The folder to deploy in the firebase.json file is set to build. So when I want to deploy my web app to firebase, I use the npm run build command first to create the build folder which will be deployed.
When I then go to my website, open the chrome developer tools and click on source I can see all my files inside a static folder. I see it just the way I formated it, as if I was inside my code editor. All the components. My entire folder structure. Basically the whole code of my app is viewable in it's entirety.
I was a bit shocked and confused so I checkt if this is normal. I went on big websites like youtube or twitter but I could find hardly anything in their source folder. When I view the source of twitter it does have some files which is just plain and open javascript but not alot. And also the folder structure is not visible. I need to view files using Ctrg + P. Most files look different too etc.
It's best if you just have a look at the source section for twitter in the dev tools. I don't really understand what I'am seeing but I notice it is diffrent when compared to my website's source.
Their webpack somehow doesn't map the bundle out into plain readable code. My bundles in the build folder are mapped into exactly what they were before being bundled. At least that is how it seems to me.
Simple and short: Source of my website shows everthing (all the files) just as it is and for everyone to see. Source of big websites it doesn't do that. Their's is somehow concealed. And I want to know what they did, how they did it and how I can do the same.
I have seen many people say that it isn't important if it is no security risk and I know a bit about obsfuscation, but I believe they do something else too.
I also want to emphesize that this isn't about if I need to do it or not. I want to do it but I dont now how or what. I haven't found any place were this was adressed completely so I really don't understand how it's done.
I am thankful for any help I can get.
put GENERATE_SOURCEMAP=false in the package.json scripts -> builds and then run npm run build. Hope it will work.
"scripts": {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
check this reference How to disable source maps for React JS Application
You are basically looking for a module bundler and there are a lot out there, the most used is https://webpack.js.org
It is very simple to use and there is an online tool to help generate the config file for different use cases https://createapp.dev/webpack/no-library
What webpack does, it will create a bundle.js for you so at the end your project will be just two files index.html and bundle.js
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
I've built an AngularJS app. I scaffolded my app using bower and yo. Since I want to make it to production now, I'd like to know if there is a way to run a command from the cmd and generate like a distribution folder with all my dependencies in. I think I saw somebody doing that, but can't remember where.
I ask for this, because everything is in /bower_components and in their own folders, so It would be tedious to make it manually. Thanks in advance for your help!
I'm trying to set up a client-side app workflow with yeoman (http://yeoman.io/), and as I'm coming from Rails background, I'm used to the niceties of the asset pipeline, which is backed by Sprockets (https://github.com/sstephenson/sprockets).
I'm struggling to make all the parts play nice with each other, and already spent a few hours trying to figure it out.
The first question that comes to mind is, is there a well established (e.g. convention over configuration, like in Rails world) way of developing a client side application with yeoman? Some definitive guide (besides the basic webapp-generator guide), perhaps?
Some suggest using requirejs (which I rather not use, because while it simplifies things in development, I'll need to jump through hoops to package the app (e.g. use Almond.js or AMDclean.js, or incur the unneeded overhead of requirejs).
My setup is:
Coffeescript, Backbone + Marionette, Handlebars for templates and ZURB Foundation with SASS.
What I'd like to accomplish in the end is the following setup, while using bower for managing the 3rd party dependencies:
In development:
Have something like Rails' manifest for javascript, so I can declare the order of dependencies, which will exploded into the the index.html
For all .scss files a .css entry added to index.html
Each file watched and compiled when needed
In production (dist):
All .scss files compiled, minified and concatenated to app.css
All bower files concatenated and minified to vendor.js
All application coffeescript files compiled, minified and concatenated to app.js
All templates compiled, minified and and concatenated to templates.js
index.html modified to include only those four files.
Is there something like this setup available?
I'm also open for suggestions and/or other alternative workflows.
Yeomam won't get you as close to a Rails workflow as you might expect. My two cents is that you take a look at something like Middleman has it does what you want out of the box.
Yeoman way
Using generators
You can use Yeoman generators and try to find out the combination of generators that will better suit the stack you are looking for, from what you describe I might take a look at:
webapp
backbone
maryo
At this point most of your requirements (both development and production) would be fulfilled:
a well defined project structure
compile coffeeScript and .scss
watch and compile
generators for model, view, collection, ...
compile and minify all files for production
You can use multiple generators to customise your own stack, every time that Yeoman detects that a generator overwrites a existing file it will prompt what to do, and you should be able to manage the conflict by yourself. Some framework-generators will obviously clash (it wouldn't make sense to try to use a angular generator on top of backbone).
Fine tuning
You can use sub-generators to scaffold more specific parts of your app, see Addy Osmani video.
Building generators
If you feel limited by some of the choices that a generator might impose (e.g. you prefer browserify instead of requirejs) you might want to fork a generator and add that as an option. You can even build a generator form scratch that will build your custom stack!
Grunt and Bower way
Yeoman is build on top of this two, but you can opt out at any moment and build your own stack using this two. You can add your dependencies through bower, and your tasks using grunt. There are plenty of examples that can give you some guidance, you could start with Yeoman webapp. There are also good examples at github like juanghurtado/puppeteer.
There are 3 files that you must keep an eye:
package.json — all you node dependencies go in here
bower.json — to manage the client dependencies
Gruntfile.js — here you define the tasks
Wrapping up
Maybe I'm stating the obvious but Yeoman does some magic work and helps you managing Grunt and bower, this magic only happens when you fully understand how this 2 work. So I would recommend that first you dive into some code and fully understand how Grunt and Bower work, and then you may use Yeoman magic.
Some other tools
You asked for some suggestions, here it goes:
gulp.js An alternative to Grunt. More you dive into Grunt more you will want Gulp (IMHO).
browserify An alternative to Requiere. Read this
assemble Static site generator for Node.js, Grunt.js, and Yeoman
Roman,
Answer for your first question, here is a guide on how to use Yeoman: http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254
If you want to use coffeescript by default, just pass the --coffee param
yo webapp --coffee
handling the assets order you can handle from the index.html file.
When you want to get the app ready for production just type the
grunt build
that will unify and minify all of your assets and throw it all dist folder.
To customise what you have in the build process you would have to write your own or customise the grunt build task, so that it will do exactly what you want.
Hope i gave you some useful information :)
Not an answer to my original question, but rather a pointer for someone who'd like to implement the same workflow I was looking for. I ended up writing a custom Gruntfile, using the grunt-injector to do the "explode the assets to the index.html" part, grunt-bower-install to add bower assets and configuring the grunt-usemin, grunt-contrib-concat, grunt-contrib-cssmin and grunt-contrib-uglify accordingly.