I am developing a web application using Sailsjs for the backend and Angular.js for the front end. To scaffold the Angular app I have used yeoman with the angular generator and for the back end I used the default Sails app generator.
During development I run 2 servers, the 1st is the sails server to host the back end and the second a grunt server for the front end.
For now my configuration works fine but when in production I want to combine the two ends in one and have sails server serve the angular web app...
Can someone explain how to do this?
I haven't used Sails before but it looks like it generates an assets directory. If you'll notice, Yeoman created an "app" directory into which it put the index.html, JavaScript, styles, etc. It appears you could transfer the contents of the Yeoman "app" directory to the Sail "assets" directory and it would be served up.
http://sailsjs.org/#/documentation/concepts/Assets
If no one with specific experience with Sails shows up, maybe that will help some.
Related
I'm attempting to build a simple react/node/express app from scratch (not using the create-react-app). I've built out a simple back end to pass some data to the front end but am having a hard time figuring out how the two communicate. How can I run the front-end and back-end together and view the front-end with the data passed into it?
I'd like to do this all in one command. Do I have to use a tool like webpack to bundle everything together into one runnable package?
My repo can be found here, it is the react-and-express branch that I've linked to. Any help is much appreciated! Currently I'm running the app by starting index.js but that is only the backend, how do I run my front-end App.js and get the two to communicate?
https://github.com/int-a/contacts-application/tree/react-and-express
You can use concurrently to run two node commands at the same time (1 for front-end and 1 for back-end). And then use the proxy configuration in webpack dev server to alias the calls to the backend port number for the same machine.
I have question that came to mind about an Angular project for which I cannot find a satisfying answer. When I googled for it I only came up with how to deploy the application and not an answer which answered my specific question.
Normally when an angular application is developed we can run ng serve in order to get a development server. When we then visit the dev server we get served the following files which are required for the SPA.
The development server serves our only static HTML asset the index.html file and the necessary bundles of compiled angular code on which our application runs.
When we deploy an Angular application is the Angular application still in need of a server on which serves the application? Or can we just serve this bundle of files from our backend?
You need to generate your application files with $ ng build command. The build artifacts will be stored in the dist/ directory. Then you can use a service like Surge as a static web publishing or other webserver.
On the other hand, if your application use Angular Router, what I said above will not work wonderfully. You need to add a middleware.
If you're using Express for example you need to add something like this:
// server.js
const path = require('path');
app.get('/*all', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/index.html'));
});
Hope I help!
my issue: I have server written using Spring Boot, Spring Data, MongoDB and postgreSQL. My client is written with React/Redux. I keep them in two separated git repos. Now I’d like to deploy them to Heroku. I already deployed back end but now I’m not sure how to add frontend. I’d prefer to have it as one app because then I wouldn’t have to worty about csrf.
what solutions I was thinking about: As far as I’m concerned I see two solutions:
1) deploying front end as a separated app and make calls to backend (already deployed app)
2) somehow making it into one app. I read a couple of solutions and one suggested making a Procfile, but in that question there was one git repo. Deploy two separate heroku apps from same git repo
I’m using Maven and Yarn.
If your client project is also a maven project, you can make it a dependency of your server project.
You can then make the build copy your client artifact into the src/main/resources/static folder and have your server application serve the client as static content.
Update: This link is a good guide how to do it: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
It describes a multi module maven project with a spring rest backend- and an angularjs frontend module. But I am certain that the principle will work also with a react/redux frontend in a separate project.
It will require some tweaking though:)
I made an AngularJS App on its own and a NodeJS app seperately, but what I'm trying to do now is make a fusion of both. Either by putting the nodeJS app inside the AngularJS App or the other way around.
I know that it's better to have NodeJS app serve API that will be consumed by AngularJS App but I only want one server for the whole thing and I think it's doable since when I make an AngularJS app there is already a folder called "node_modules".
The structure of my project now is :
AngularApp folders (in which there is the whole AngularJS app)
node_modules (in which I loaded express, mysql and what I'd need in Node.js App)
independently: NodeApp.js (the NodeJS app that contains the code of node)
However, when I run app.js/index.html it throws the following error: "can't get index.html", meaning that even though they're in the same project, AngularJS and NodeJS don't communicate. Can you please help me with this? How can I make the link between AngularJS and NodeJS if I want to make them both in the same Webstorm project?
Thanks in advance.
I found this in my research:
http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/02/13/how-to-use-nodejs-express-and-bower-to-create-angularjs-apps.aspx
it is what I want to do but I didn't understand everything since it's easier using Webstorm
You should start a new app using Express Generator and check out the folder structure it creates.
I have a small app built with expressjs and angularjs, here's the folder structure:
bin
config
models
node_modules
public
javascripts
In here all the angular crap (in sub folders of course)
routes
test
views
index.html (this is my main html file, here is where angular loads)
app.js
To do this I had to change the views engine to work with .html
Then when you access localhost:3000 the server renders index.html (localhost:3000/#/) which loads angular and all the crap along.
All my angular resources go to /api/yourModel.
So if you access localhost:3000/api/yourModel you are accesing the api directly.
For me this works just fine, and as you say you have everything together. The front end and the server in the same "project" sort of speak.
As suggested by user1655756 , what I did was make a new nodeJS application and then instead of public, I injected the angularJS app folder.
Then as suggested by Shaffanhoon in node.js I specified the path to my index.html and that's what worked for me ..
Thank you for all your help
right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.
Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.
At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.
I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.
Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.