I want to create CRUD application using technologies like:
- Vue.js
- Node & Express
- mysqli (xampp)
What is the best way to make project structure (directory and files tree)?
If dividing two folders - front with Vue files and server with others is a correct practice? Or maybe the whole app should base on the one of that, for example vue and all other files/folders should take place inside of vue folder? I know that it is a lot of right ways, but what which of that are the best?
Splitting into front end and backend is usually the first step to take for me, then as development continues you can refactor as needed. I'd take some time to review github and find projects that are well setup, for example:
https://github.com/mozilla-iot/gateway
Related
It's been a couple of weeks since I started working on React. I'm having fun with it. What's the point of React Build? To create a full-stack application, you make a NodeJS/express back-end and a front-end in separate folders. My booking website is finally done. When it comes to deploying it, why can't I upload the folders like I have on my local machine? It's both on different ports and in different folders. why did i waste my time on cors if everything was going to be on single port ???
why ? react Build ?
You could actually upload same files and folders of react you have on your local machine and serve all of that to customer and it will work as usual. The issue would be performance. You will have to server so many files and folders together plus all the packages. What react build does is using the bundler, put everything together in one build folder and only serve that. Build folder is as minimized as possible with all the packages needed to run application. Hope that answers your question
I'm a building a web application with Next.js/React.js + Node.js.
I would like to deploy my application not separately but into one server(e.g. Heroku).
How could I do this and make it work?
Using package npm i -D concurrently you can run your both projects on same server.
Use this link fo reference
https://dev.to/numtostr/running-react-and-node-js-in-one-shot-with-concurrently-2oac
Never used next, but I had a similar problem last night and tried like 5 different things to no avail.
Found this today and walked thru his demo and got a better understanding of what's going on and was able to restructure my project to get it to work. This post walks thru how to have Express serve your React project using heroku-postbuild.
Other things that tripped me up: I needed two package.json files (one for Express and one for React) and I didn't have my express app directory set to find index.html
https://daveceddia.com/deploy-react-express-app-heroku/
I am creating my first app node express app with angular 7 on the frontend to be deployed in production. I have below question?
What folder structure is preferred, should I create separate
projects for node and angular or same project(server.js in the root
of angular project and server folder to create express server
files)? What is the preferred one and I have to checkin the project
in one folder of svn.
Should I use babel and create the node server code with es2015 or
continue with old approach?
Its all up to you, what I am doing is I have sepreate directory for Angular and Node projet
project
|
client - Your anguar project
server - Your Apis and server side coding (Only this folder require at productino level)
Then we can create a gulp file and task to gulp that Build my client
project and put that build folder inside the
server -> public
Now only server can be use to production where Build will be render as static.
And next to authentication and autherization process you can follow JWT based permission .
Generally I would say that separating your client and server code into separate projects is preferred so that you do not have to release both your client and server at the same time when you make a change to one or the other. The rest of my answer is based on the assumption that you would separate the two sides into different projects.
As far as structuring your server side Express-based application, check out this link for some guidance on how to handle your situation. See the answer to the first question about different approaches to how to structure your Express application for different deployment scenarios. Also, if you use the latest LTS version of node, you will not need to use a transpiler to convert your files to Javascript because the Node environment will handle that for you.
As far as structuring your client side Angular-based application, check out this link for a very detailed discussion about best practices for structuring your Angular application.
I would prefer following, in case in future you need to separate the API layer with client you can do it with ease,
project
|----client
| ---client-template //All UI code like .css/htmls and node process initiates from here
| ---client-angular // All the directives and controllers goes here
| ---client-service //Service layer, All the API call to server goes here
|----server
| ---server API's // separated by its own module if any
|--- you API modules and so on..
This will help you to have flexibility over client and server integration without any tight coupling. Also easy to maintain and debug.
Answer 1: you should make two separate folder/repository structure for frontend and backend.
let's suppose your application grows fast at that time you want to scale your backend and you want to host your Angular app as static web app using Amazon-S3 so at that time it will be very easy to manage this.
May you want to use CICD, in that case also it will be good if your separate folder so you can create separate CICD jobs for backend and frontend.
May be your company hired some developer which is either expert in frontend or in backend only. in that case your company don't want give them unnecessary code access. so separate repo will be an easy option for this case. (this may be Depends on your team and company's approach for development)
Answer 2: I recommend go for es6 or es6+ features.
latest node.js version is supporting some of the features of es6. for example
- spread operator
- destructing
- classes (you can use OOPs)
- arrow functions
- let, const
- async await and etc
you can use babel if any other feature which is not supported by node.js. there could be may reason for using babel, but i want to know which specific feature do you want to use with babel? so i can explain according to that.
I have used the following approach that bind the Angular Application and the Node server as a single unit.
Steps for creating the project structure is:
Create a new Angular project with the CLI.
Create a server.js file in the root directory of the project and configure it to render the contents of the dist/ folder on the / route.
You can refer the link for the server code: https://github.com/nikhilbaby/node-server
Running the server
I usually run the project with ng build && node server. This will make sure that the angular application is build first and after that node server is started.
Have Node.js project with two Angular2 application, I want to combine all (site, admin and server) node_modules into one. and I need to control all app from root directory.
Please suggest the solution or suggest the standardized method to do this.
With angular cli multiple apps feature you definitely can combine your two angular apps, which is make sence. But I definitely recommend to keep your server app separate.
Like have a folder src with two folders client(angular apps) and server in it.
Firstly I must confess I am a noob at node. I've been using ASP.NET then PHP then Django before. Regardless, I've found node a breath of fresh air. This problem is also not strictly a node problem, but I need a node specific answer.
I have an express server and angular frontend. The server side templates are in swig and currently only serve for error pages and the index page. Mostly the angular templates will make up most of the front matter.
What I'm struggling with, if only only in deciding how to do it, is getting an efficient work flow for the asset pipeline. Server side templates must be able to inject the vanilla of assets during dev and testing. The same for client side templates during testing. Basically, running with express' static middleware should be an option without any configuration (maybe with some helper in server side assets). Thus git clone -> grunt -> viola.
However, during staging and production, I would like the server side files to stay vanilla. The template helpers may parse a manifest file indicating the cache busted links (CDN path maybe too). How to make the link from logical asset bundle name to production ready asset is a mystery for me, while keeping development transparent.
The client side templates may be minified, concatenated, injected or whatever, as it will be saved to some dist folder for uploading. It is important that the whole dependency tree (images, fonts, css, js) must be "exported" to the dist folder.
To deploy would then be: pushing the server side code to the server and running. And pushing client dist folder to some asset host (CDN, nginx, another node, maybe even connect static)
What my question(s) then actually is(are):
Is this workflow possible with tools such as broccoli/gulp/grunt alone?
I've tried connect-assets but I don't want to conform to some predetermined folder path. Also the cli tool didn't produce the other static assets. Perhaps I don't understand the tool.
Am I following the correct approach?
I've added to a discussion on broccoli concerning the manifest file consumption:
https://github.com/mjackson/broccoli-rev/issues/1#issuecomment-49076249
Edit: I forgot to mention that I use bower, so assets should be pulled from arbitrary (URLs too maybe) locations.
I think angular-fullstack is what you want. Even if you don't use it, it does almost all of what you're looking for.
The only thing that it might be missing for you is deployment. It has built in support for Heroku and OpenShift deployment. You could use something like grunt-ssh or grunt-deploy for other deployment scenarios.