I have two react application App1 and App2 and I want to merge them in a single project in way that -
They should use common package.json
They should use common node dependencies.
They should not affect each other configuration and code structure.
I am using default webpack configuration available in the create-react tool.
Thanks in advance.
Related
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.
I am writing application by using Python/Flask as the API back-end, and want to separate the front-end (browser-based) as an individual project (VueJS). I've read about Webpack, but I can't find any best practice to start, such as: can we use NPM to manage dependencies, use webpack for front-end not using an Node app as an entry ...
Thanks alot
WebPack isn't a framework.
It's something that a task runner.
Exemple: You use SASS, you want something that compile all your sass file in CSS file. You create a task and webpack have a task now. And you can ask him to automaticaly compile the file when change.
Maybe what you want it's more have two project:
One who handle the data an may available with an api
One who is the web ui for the user who get the data and format it in a beautifull UI
Webpack won't be your solution. Continue with your VueJS and look at VueX for your data handling browser side.
I've been told to implement Continuous Integration for an existing application (FrontEnd: Node.js - BackEnd: .Net API).
The API endpoints are currently hardcoded in the .js files, that get "uglyfied" after the build (webpack). I want to move them to a config file, that gets copied to the dist folder, so they can be changed at deployment time (just like a Web.config file in the API).
I have zero experience with Node. Is this possible? How?
Look into a dotenv file and use process.env.MY_ENV_VARIABLE in your code to access environment variables. Here's one library https://github.com/motdotla/dotenv but I'm sure there others (can't remember which one I used in the past).
Edit: If you're using Webpack to bundle your front end app you might need to configure it to pull in environment variables, you can use the define plugin: https://webpack.js.org/plugins/define-plugin/
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.
I have nodejs project with react frontend part, and I want to use babel for backend server (to have import / export, and some additional features like 'decorators', object-rest-spread etc)
Also I want to use babel for react frontend project but with different set of presets / plugins.
On the backend I have latest (8.2) nodejs so it's already know classes, async/await etc which shouldn't be transpiled.
But at frontend I'm targeting IE11 so I have to enable a lot of plugins.
So if I have single .babelrc config for frontend and backend I'm getting overtranspiled backend code.
I know there is an 'env' option for babel config but in describe case I have same 'env'.
For now I'm ended with two configs:
one in package.json and one inside of webpack.config (babel-loader options).
However I don't like result because its may confuse new developers.
He can found babel config inside of package.json and think that this is the only config, trying to add / modify something and struggling why it doesn't affect frontend part.
There is also some problems with such setup:
Jest can't read babel settings from webpack.config so I have to define additional "env": "test" in .babelrc just for jest.
And this lead to unnecessary transpiling backend during tests.
That's the way I've approached the problem in my projects. It's best to keep the two separate, and perhaps be explicit about which one you're using in a given context. You are targeting two very different environments, and it makes sense to have two different configuration files. Where you building an webview version from the same codebase, you'd have a separate config for that as well. And so on for each "environment" you'd have.
It might pose problems for newer developers, but I'd argue that having if (is_in_client_mode) ? 'one_config_value' : 'another_config_value' spread around is just as bad, without the benefits of having two files.