Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I've just downloaded - vue-webpack-boilerplate - and the little I've seen of it looks really good :) (first time with webpack + ESlint)
I'm a little confused however - how can I go about adding an express backend to the project?
Not every route is always going to be a vue, sometimes it's an api request or a db call or the like - and if I do hookup an express backend, how can I choose what vue components I want to load?
Am I going about this completely wrong/have misunderstood what this is for?
Thanks
Edit: I've looked at http://vuejs-templates.github.io/webpack/backend.html - but that's not really cleared anything up
You might be confusing with npm build packages like webpack for front-end with back-end express project.
The boilerplate you mention is for front-end. It allow you to develop a static website either with or without SPA and end up with html, css and js files to be deployed at any static file hosting.
There is no wrong to make API call anywhere on client-side. E.g. on every route change, you specify what component to load and it can make an API to call to update the UI. That is SPA for client-side routing. You just have to make a separate express project for the back-end.
You can try Nuxt for server-side rendering (SSR). The main advantage for SSR is SEO friendly but not suitable for dynamic page like profile and checkout page. Nuxt is a universal (client or server routing) Vue app by generating static html during run-time. However it is differ than what you think you want to add express API back-end but you can still populate dynamic data with Async Data
Check this out JAMstack.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 days ago.
Improve this question
I am trying to link my php file to write to my MySQL database from a js react form but it is not working. Can anyone see what I am doing wrong?
code for the javascript form
code in the php file
The form is in my main App.js in the render() function.
I want it to write to the mysql database but so far is not working
At a high-level, I would recommend not using PHP if you are using React - especially in the way you are attempting which is not possible.
PHP renders on the server first before React renders on the client. You can't nest PHP inside of a React App in the way you are trying, it's not possible.
If you enjoy React, I would just jump right into Next.js 13. Why? Because if you enjoy React, Next.js is built on top of React. The new magic in this latest release is the concept of Server Components and Client Components. The learning curve is really small if you know React / Javascript.
PHP is by-default a server-side-rendered language. I understand you want to use PHP probably because of it being connected to MySQL - but you can easily connect your existing MySQL to Next.js 13.
Another huge benefit to using Next.js 13 is you can run Javascript on the frontend and the backend.
Here's an example sandbox template I created which will get you going in minutes on Next.js 13 (which is just React with client + server). It hits a Weather API using a Server component. It can also simply render any React when you place use client at the top of the file.
Both Next.js 12/13 have a backend so I would recommend avoiding PHP. However, if you must stick with PHP - this article by GeeksForGeeks can guide you on how to setup a PHP + React app.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Backstory: My boss has given me the mission to figure out how to implement react into one of our existing codebases. The idea is to use this to test integration and see if we can slowly migrate out projects over to react. As well to demonstrate to those in charge improvement react can offer over jquery. The problem is I only have less than 2 years of web experience most of which is jquery and near zero of that is react. So I'm struggling to learn the process of integrating react. This is made more challenging by figuring out supporting systems like webpack, npm, and varies libs used with react.
Goal-1: Get a single page running react inside an existing layout that can support modules/libs
Goal-2: Get this page to play well with our jquery menu (option as I can rewrite it)
Goal-3: Get everything placed into its respective folders inside our src/main/webapp
Current state: I have a page loading react and babel using simple script tags. This works but is rather difficult getting any other react libs to load. As most assume npm is being used or commonjs at the minimal. Neither of these I have much knowledge with using/implementing.
What I need: Some guidance on how to implement react into an existing project. I've run over a few articles talking about the process but many lack details needed to understand what is going on in each step. For example getting webpack to export into the target directory so it can be bundled for use in tomcat.
Before this ends up closed, my high level thoughts is get your spring project into a state where it is exposing RESTful endpoints for getting and saving your data. Then build the react project separately from the current java or jquery projects, and have the react ui consume those REST apis.
Apart from that, this is a very broad question you are asking, with lots of ways to solve it, the above mentioned is only a starting point. I couldnt possibly go into complete architecture here..
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Now I program all my web apps with Flask or Django. (blogs, social networks...). I need templates, db access, controllers, routing...
Now I want to do same web applications, but with javascript.
People tell me : You need NodeJs for server-side, Angular for the front, and for example firebase or mongodb. Or also you can use Express JS.
But can I just use Angular JS and Firebase for start a big web app ? Need I Node if Angular can Access/Update/Delete in my db ?
Angular is a client-side framework, so you'll have to at least have some web server to serve your static files. Other than that, if you're using Firebase, you wouldn't technically need any server-side code to handle your logic - but naturally, that depends strongly on what data your application deals with.
If what Firebase provides, doesn't cut it for your cases though, you will need a server-side, and pretty much any web application framework would do. Node.js (using Express), PHP, ASP.NET, whatever your heart desires.
And yes, Angular works perfectly well for creating big complex web applications.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I was given an existing big ass nodejs app which contains both the UI and the back-end logic. I would like to split them up and am thinking of using AngularJS 2 for the UI part.
I have gone through some of the examples and know my way around Angular. However I do not know how to properly install it on the existing nodejs app - what do I include in the package.json .... what do I do with the systemjs.config.js, tsconfig.js and typing.json ? How to include the "typescript" parsing/compilation ?
Thank you
P.S. the nodejs app is running sailsJS framework.
I think you need to split the app into 2 layers (assuming this is possible):
1) the REST service layer
2) the Angular2 Front End layer
Node.js (maybe with the help of express) would run the REST service piece.
Angular2 would be the Front End part, calling the REST services offered by the Node server.
In such a scenario you would not have to 'install' Angular2 on Node. You rather would have to prepare a development environment (I suggest to use also Angular2 CLI) for Angular and start the development against the available services. Unfortunately these means that it may be difficult for you to reuse whatever pure FE logic has been developed so far (maybe with the exception of the css part).
I hope this helps
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am trying to write an app with Node.js with Express and Angularjs.
Is it possible that I allow AngularJS to handle all landing requests? and Node.js is purely for APIs? meaning that all routes written in Node.js will be like this:
app.get('/api/users', users.showAll);
app.post('/api/users', users.create);
app.get('/api/users/fb/:fbId', users.findByFb);
app.get('/api/users/:userId', users.show);
app.put('/api/users/:userId', users.update);
app.del('/api/users/:userId', users.del);
And AngularJS will be able to resolve URL by itself e.g. localhost/users/Some-Name?
What are some best practices to follow when integrating the two together?
ALso, is it recommended to have AngularJS and Node.js app to be separated into two different application? and what are some ways to do that?
Thanks in advance!!
Obviously, the design and nuances of any application will dictate how exactly it should be setup, but you can certainly have a single page web application running in Angular making AJAX requests back to your node.js server side API. I have created many small and medium sized apps in exactly this way.
Node.js can handle your API in the way you have designed, but you will need some initial route in node that users will initially hit to bring up the HTML page that bootstraps the angular.js application and loads any additional javascript and css libraries that you will need. You will define that route and then setup the static resources in your node application so that the browser can load these things to spin up the angular app.
The angular application itself will be contained in javascript files that will live in a static resources folder in your express app. Typically, something like /js/myNgApp.js will work to start - but you can get more exotic by separating out controllers, directives, services, etc into their own js files. This is something you can do later on.
Once the angular app is loaded and running in the browser, you will just need to use the $resource service in angular to define your ajax urls to the api in node then have the angular client perform get or post (or whatever) request to these urls.
If security is something you will need in the app, that needs to be implemented as a page and url before loading the angular application. There are security frameworks for express that can help you with this. I use passport.
In Chrome, the developer tools (especially the network tab) will become your best friend.