I am trying to create MEAN app & ran following commands:
npm install -g generator-meanjs
yo meanjs
After this I was able to setup the application. Problem is I can see lot of dependency being added (faceboom/twitter etc) & the structure is little difficult to follow.
Is there any easy to setup mean app?
Related
I am a beginner to Angular2.
This is the article I was following:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Tl;dr: ng new app, ng serve, npm install express etc, create server files, ng build and finally node express.js to serve index.html from dist
My problem with the app build in this article is that it serves from dist which means I would have to stop the server, run a new build and restart the server on every change which is quite cumbersome from pov of a developer. I want my changes to the client side to be reflected on each refresh.
Can someone point me in the right direction so as to achieve this? Or let me know how to to get the architecture right even if it means starting from scratch
PS:I have been trying to modify this example to serve from development (src/) however so far am unsuccessful. The browser is unable to find dependencies, shows the "loading.." throws errors like "System is not defined" and "Syntax error '<'.
I understand your pain point. I've seen this tutorial and its fair up to some extent, but as you said there is no auto-refresh script written for changes. However, I have then decided to create my own repository for the MEAN stack project development. Check the following URL where I hosted my MEAN app including
browser-sync
gulp
nodemon
https://github.com/darpanpathak/MEAN2-MarvelApp
This repository will help you a lot for starting MEAN stack application with angular2.
thumbs up if you are looking for the same.
Tl;dr: ng new app, ng serve, npm install express etc, create server
files, ng build and finally node express.js to serve index.html from
dist
To make webpack to watch your changes during development you just have to add --watch when you build your app. So you should type something like this in a console terminal:
ng build --watch
And then run your server:
node server.js
That should work.
I came across this problem as well, so I wrote a little post about it.
You can find the detailed solution here.
In summary, what worked for me is to use different ports for the server and client, and configure my npm start command to run both server & client in parallel.
You will have hot reloading (when you change the client code, it will refresh the web browser instantly), and the web page will call your server API.
BTW, I couldn't make ng build --watch to work, so I had to think about this workaround.
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.
I was wondering how I have to setup .flowConfig in order to use flow on a React- Native project. I created an empty .flowConfig file but as soon as I include the react-native module in a JS source file and check this file with flow, flow displays a 'not_found' error message.
Follow the instructions on https://flowtype.org/ to create your projects .flowconfig file, you can copy and paste it, you also have to install flow via brew install flow and add the flow binaries to your package.json, once you've done all this, you should be able to manually run flow and check for error types, but, that is not really optimal.
I haven't been able to set up flow on atom without using nuclide, I'm guessing with some digging around the packages you can find something that works that allows for on-the-fly flow checking.
The link provided by #jerome (https://egghead.io/lessons/react-setup-nuclide-to-use-flow-and-eslint-mac) is useful but only for nuclide installation, still worth a watch.
I advise to watch https://egghead.io/lessons/react-setup-nuclide-to-use-flow-and-eslint-mac it explains how to use Flow with Nuclide. I had issue to make flow works and my main mistake was that I didn't install flow (brew install flow). On the official site (https://flowtype.org/docs/getting-started.html) they don't mention you need to install flow (or it is not super obvious if it is the case).
Anyway watch the video it is great, it even explains ESLint :)
I have an Ember-CLI application that is very form heavy.
I started using Ember Forms to help with layout and templating, which is nice and seems to be working fine.
Apparently for validation, it requires Dockyard's Ember-Validation as well... This particular dependency seems to be installed differently and I am lost as how to do this.
I am used to using something simple like bower install ... and then just adding the dependency in brocfile, but in this case, Dockyard provides a huge list of builds to choose from and I have no idea which one to use?
Does anyone have experience installing ember-validation in an ember-cli project and getting to play nicely with ember-forms? Or perhaps it is actually more simple than I think, and I am just getting thrown off by all the builds to choose from?
To install it you can add manually the url to the build in bower.json
"ember-validations": "http://builds.dockyard.com.s3.amazonaws.com/ember-validations/ember-validations-latest.js",
And after that run bower install it should work fine.
Hope it helps.
I want to use Node.js as a Share.js server and Ruby for the frontend. As far as I know, Heroku only allows one web-facing process called "web". Does anyone have some experience trying to do something like this?
No, Heroku detects the application type when you push your code to Heroku and it compiles the slug. You'd need to have them as seperate applications with a defined API between the two (not always a bad thing)
UPDATE: You can 'stack' buildpacks these days, eg Ruby + PHP so you could have both executed. See https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app for how to use multiple buildpacks in the same app.
As a caveat, you technically can install two languages on a single app — but I'm not sure about running them concurrently. I made this buildpack to combine NodeJS and PHP (so that I could run Grunt during the slug compilation):
https://github.com/gcpantazis/heroku-buildpack-php-gruntjs
The language detection is usually fairly dumb; it'll be looking for a file indicative of the lang, i.e. index.php or a rakefile. You'll have to change the detect bin so that your code will pass.
Update:
Even better, consider using https://github.com/ddollar/heroku-buildpack-multi ; it'll let you install buildpacks sequentially. Depending on your application you might need to find language buildpacks that don't have verification steps, i.e. checking for a package.json file in a NodeJS app.
Yes, it is mostly possible I believe, as long as you're not doing something very tricky. I once deployed a Flask (Python) app that used Stanford's CoreNLP - which is all written in Java. You will need heroku-buildpack-multi.
After adding this, make sure to make a .buildbacks file and add all the buildpacks you will be needing from the Heroku github.
This circumvents Heroku detecting your app type itself and makes it install all necessary buildpacks from the .buildpacks file.