I am currently working on two related projects. One is a Phoenix based website and API, while the other is an Angular2 application that among other things uses the API provided by Phoenix. I now want the Angular2 application to be used by the Phoenix project. The problem is that I don't know what the best approach is. I am very new to Angular2 and NPM, and know very little of how it actually works outside of basic usage. These are the ways I can think of solving my problem:
Put the Angular2 project into the Phoenix project, making it one project. I have no idea how to do this, but I will probably get there through trial and error as both use Node.js so it should be doable.
Publish the Angular2 project to NPM, and then import it to the Phoenix project. How much work would be needed on the Phoenix side? Would it be the same as just running the index.html in the Angular2 project? Would I need some kind of Angular2 "shell" around it?
Run the Angular2 application as it's own thing, and just link to it through the Phoenix website.
Importing it as a node module sounds like the best approach, but can it be done for full applications, or is it intended for support libraries only?
I am unsure if this is the "right" way to do it but this is what I did in the end:
I compiled my entire Angular2 project into app.js, vendor.js, and common.js, I then moved it all to web/assets/. After that I simply created a new html and referenced the files in question.
The biggest challenged was finding something to compile it all into these 3 files. I ended up using a stripped down version of: https://github.com/AngularClass/angular2-webpack-starter
I think you would want to leverage brunch.io, which ships with phoenix to handle your front end dependencies. There are skeletons which are essentially templates that create different front end configs but I don't see one that provides angular2. In this case I would say use bower to install the js packages you want ie:
bower install -S angular2
With this you can use brunch as a processing pipeline and it will handle minification, linting etc. and you will still be working within the "recommended" approach to managing front end assets in Phoenix.
Related
I currently have a React based website. I want to start on the process of converting the website to also work natively through react-native. I understand that I will need to re-build the UI for the native version.
My goal however is to leave both versions in the same node project so I dont have to update my non-view based code separately for both versions of the code base.
Is it possible to add the dependencies and files necessary for react native while not having to separate the native code out into it's own completely separate project and if so how?
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
I'm working on a web application that currently uses vuejs for part of its interface. The back-end is NOT in Node, so there is currently no package.json file or any tool from the typical npm stack in this repository.
We already have a bunch of non-npm dependencies that need to be installed in order to use the repository, so my coworkers aren't too open about the idea of adding another layer of complexity. I can't blame them for that, it's the reason why I use npm scripts and not even gulp in my other projects. I'm tired of spending hours learning and configuring build tools that never end up doing what I want anyway.
But since the vue-cli tool no longer includes the build command, I'm a bit stuck. Is there really no more CLI app to build vue files at all? And if so, what would be the smart way to use vue without webpack? Template strings are not maintainable at all, and <script type="text/x-template"> don't work when you want to use multiple components from multiple files in the same page.
I realize your question says 'without webpack' but you may be interested in backpack - a CLI app i came across for building Vue.js without requiring you to write any configuration code. It is basically webpack preconfigured as a minimalistic build system for Node.js. It provides two commands, dev for live reload enabled development and build for building you project.
I am new to programming and I learned how to use laravel and vuejs (which now ship together in laravel 5.3). I'm only practicing Vuejs right now, and was wondering what is so wrong with installing Vuejs using a simple src link rather than going the complex way of installing with npm and node.js, which is another learning curve for me if I have to learn it down the road anyways. Thanks for answering, I just don't understand what could be wrong with a simpler minified src link for a Vue.js installation.
If you use standalone version of Vue.js via a simple minified src link, it will come with a template compiler. The Vue component templates will be compiled in the browser environment for every user, before rendering. Therefore it will be slower compared to the runtime build option.
If you create a project using npm and vue-cli, you will get the runtime build of Vue.js, which will also package the vue app into one single app.js file, thus minimizing network requests for your production app. Your users will have a much better experience.
If you are only getting started, you can go with the simple minified src link for now. Once you get used to the framework, you can start using vue-cli.
I'm trying to create an Angular2 project with a REST service, using NodeJs. Although I found some tutorials/sample codes doing this kind of applications, the organization of the code/project is different form each other. I'm trying to figure out what's the best way so far to do that.
Basically,
what is the best approach to creating Angular2 project with NodeJs back end?
what should be the folder structure?
where to put the Angular code(with TypeScript)?
how to use Bower/Gulp?
A sample of Angular2 + NodeJS and a few other things: http://thejackalofjavascript.com/developing-a-mean-app-with-angular-2-0/
You can use Angular-Cli to create the initial project structure: https://github.com/angular/angular-cli
Gulp tutorial: https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
I do not recommend using bower. Use npm instead, as it is more stable, and has more support from the tools.
I want to know if there is some boilerplate code to use a frontend workflow tool like Yeoman with a backend framework like ExpressJS, if I want to maintain the same codebase for both the front and back ends.
Basically I want to know -
How do the boilerplate code produced by yeoman and express fit in together. Is there a way to integrate the two? (How does the gruntfile fit into the express project)
Can I substitute yeoman's default watch with an express server which reloads pages on update?
Yeoman is currently focused on front-end app development, but we're going to explore back-end integration in the future.
No, actually there isn't any right now.
But you can combine express.js with the component package manager. There is some work left, and you cant use yeoman components in component.
To answer your questions
You can look for components in the component repo that you have used in yeoman. Not the same, but might be a solution.
Use the module supervisor for this. You can get it via npm
I haven't found an easy way of integrating my own Express + H5BP + Angular + Grunt skeletons into Yeoman, and eventually just settled for creating a repo here: https://github.com/ericclemmons/genesis-skeleton
From what I've read, there are projects underway to add express generators, but eventually stacks are going to get complex enough to where you'll have to maintain your own starter app, rather than generating it.
There's an experimental branch with yeoman + express.js G+ Yeoman/Express Article
I found yeoman.js to be very cool for rapid prototyping but does require some ramping up to get used to the various tools it's "opinionated" about. I've decided to go over each of the core tools in some vids that are hopefully helpful: yeoman.js related videos
Yoeman fullstack generator now generates both front end and back end. Other interesting frameworks which do the same are Sails JS and StrongLoop
It is worth noting there is an express-generator project:
official docs
npm page
I am going to give it a go - because I'm folling this tutorial - but other than that I cant comment on its value.