I have just updated my project to work with Angular 5, and I have got a NodeJS setup on my hosting so I want to create an Angular Universal Application, I would like to convert my current Angular 5 project into a working Angular Universal project that I can setup on my hosting.
The only thing I found on this so far is this;
Convert Angular 4 web app to Angular Universal app
I followed this and It gave me errors, I imagine due to the quick changing nature of Angular that the answer is most likely outdated, so I was wondering the best way to convert it.
Should I just use the starter seed and do the tedious work of adding all my code?
The best way to do this for me personally was add in all my components, services, modules into the universal-starter project, ensure I remove hammerjs or import it properly (for Material 2). I converted most of my components to have .module so I could use their lazy loading (not forgetting to add these paths properly in my routing file and in the static lazy loading path)
It only took a few hours and alot of that was just bug testing/fixing so it was pretty easy all in all.
I had the same issue several weeks ago. There is a Wiki on how to implement Universal into an Angular CLI project : https://github.com/angular/angular-cli/wiki/stories-universal-rendering
Maybe that helps you out.
I found it the easiest to take the current Angular Universal Starter Kit and import all my Modules into a fresh installation. As the new starter is for Angular 5 CLI I hope it's future proof. We will see…
I wrote a starter kit for MEAN applications with Angular Universal for Angular 5 and you can clone my repository at GitHub here: https://github.com/Stanza987/mean-starter-kit. It provides all the instructions you need to get started. For your specific app, you can just delete the MongoDB part (Mongoose and the out of server.js, node_src/config/database) and npm uninstall mongoose and be able to integrate your project in.
Related
I am developing a desktop application using Electron.js. Now, I decided that to implement the required functionality, it would be good to use React.js. I searched for some tutorials on how to add React to an existing electron app, but all I got was tutorials on building React apps with Electron from "scratch". Also, all those tutorials add electron on top of an existing React app and not the other way round. I haven't found any existing stackoverflow answers addressing this problem.
I don't want to go through the mess of creating a new project and then copying the existing code to the new project. This would also mean I would loose all the older commits from my Git and I want to continue with this project on the same repo.
Could anyone help me figure this out?
This question already has an answer here:
Socket.io Official Chat application not work on firebase
(1 answer)
Closed 6 years ago.
I have a simple web app made using Socket.io, Express and Node.js.
Have successfully managed to push it to Heroku via Git, and it works fine. Yay!
However, I am trying to make it work on Firebase. I seem to be having some trouble installing the NPM dependencies. I didn't use Webpack or Browserify, and for Heroku, the various NPM dependencies are installed on their server, and I can leave my node_modules folder on my local computer. The docs don't seem to talk about NPM dependencies. Am I trying to do the impossible at this time? or am I missing a few critical steps?**
I believe Firebase hosting should support the various JS dependencies because if we were just doing static websites might as well use FTP and Wordpress or something. And there's much mention of web apps on their site too..
I have tried using the Firebase CLI, and reading the docs, but it doesn't say anything about specifying my various NPM Dependencies, or even ask for my package.json contents. I am wondering if it even takes notice of the package.json file so that it will install them the way Heroku does.
Am not trying to use any Firebase features at the moment, just their hosting for now, and later on will install their login and auth, which is my final intention.
Cheers guys and thanks for your help! :D
To quote one of the Firebase developers, from this forum thread:
Firebase Hosting is for static files only. As such, you cannot run Node.js scripts on it. You should look into using something like Webtask or just run your own Node.js server on something like Google Compute Engine or Heroku.
We plan to provide a solution for you to run things like you are suggesting in the future. No timeline for it at the moment.
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 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.
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.