I recently abandoned the awesome LAMP solution for Node/AngularJS and I have some serious (and noob) difficulties to begin.
I took an existing AngularJS project based on Angular Seed and I didn't figure out how can I add some backend javascript code.
In online tutorials, I always find an app.js file, in which there is some "requires" and where I can add an extra server code. To launch this kind of project I have to node app.js
In my Angular-seed based project, there is only a package.json that contains script commands.
Also, I noticed that to launch it, I have to npm start.
Where can I put my NodeJS code in this project ?
Thanks in advance !
Usually you will have two differents projects. The backend (Nodejs) and the frontend (Angular). You can expose your backend logic using a public API that your frontend will use. For example you can expose a REST API using nodejs with help of express. I recommend you to take a look at swagger that can help you to define your api.
After that using your angular app you can send different requests to that API and consume the info that receive from it.
To sum up you will have two different projects. Hope this helps
Related
I have no fullstack code experience with Spring Boot and I am wondering what is the most proper way or common approach for keeping frontend code in Spring Boot projects.
So, should I create a folder called frontend under src/main and keep Angular or React code in this directory as shown below?
- my-app-name
|
-- src
|
-- main
|
---- frontend
---- java
---- resources
Or should I prefer src/main/resource ?
As it was already pointed out by multiple people in the comments, you should bundle the frontend and backend separately. The reason for this is also that you need to build, package and deploy them separately and you need a separate pipeline for each of them. For example your spring boot app will be built as a docker container and deployed to kubernetes while it does not make much sense to host the frontend in such way, it could be hosted in a CDN.
This leaves us with your second point - monorepo vs multiple repositories. Both have their pros and cons. You can find a lot of articles on this topic online. I assume, that this is a small project and you'll work on both frontend and backend by yourself at once. In such case, you can do very well with the monorepo approach. You can do a change across both frontend and backend in a single commit, the refactoring will be easier etc. But if you choose to go with mutliple repositories, there is nothing wrong with it.
One more thing to consider is where and how you'll manage your API contract between the frontend and backend. There are again multiple approaches here. I'd advise not to go without the API contract specs (like doing everything by hand on both server and client side) and in case you go with monorepo don't create your dependency between the frontend and backend directly (on the file level), that create unecessarry coupling between those two.
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.
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 am newbie here, starting to learn MEAN.JS, As I installed everything and tried to run
grunt --force
on the command line, it returns an error like the image below.
Im using windows here and also I already installed MongoDB on the C:/Program Files path. Thanks in advance! :)
Getting started with the MEAN stack might seem very daunting at first. You might think that there is too much new technology to learn. The truth is that you really only need to know “Javascript.” That’s right, MEAN is simply a javascript web development stack.
So, how do you actually get started developing on the MEAN stack?
The first step is to set up a project structure. I’ve found the following structure to make the most sense:
controllers/ db/ package.json server.js public/
This structure lets you keep the entire stack in a single project. Your AngularJS front end can go into the public folder while all your Express API logic goes into controller and your MongoDB collections and logic go into the db folder.
Now that you’ve set up a general project structure, you need to initialize your public folder as an Angular project. It is best to do this using a tool called Yeoman.
Yeoman is a toolkit that makes it easy for you to get started with a variety of Javascript frameworks and other web frameworks like Bootstrap and foundation. You can learn more about Yeoman at Yeoman.io.
Installing Yeoman is pretty straightforward.
You can read more here: http://www.citizentekk.com/mean-stack-tutorial-how-to-build-loosely-coupled-scalable-web-apps-nodejs-angularjs-applications/
I'm developing a framework based on "Scalable Javascript Application Architecture" with modules that should be able to run both on the server (node) as well as the client.
I'm looking for a good project set-up/bootstrap where client and server-side could be developed/build/tested separately while still making use of some shared resources such as the mentioned modules.
I like Yeoman for a clientside setup, and it seems that yeoman is extending it's reach to include scaffolds for server-side stuff although this is still somewhat experimental.
However, to this day I 've yet to find a project setup that combines server + client setup as described above.
Any pointers, github test project, etc. highly appreciated.
You might want to take a look at this experimental branch the Yeoman team are working on:
http://github.com/yeoman/yeoman/tree/express-stack