I want to build a react application where there will be two types of UI, one for admin and other for user. All the files included in header and footer will be separate. how can I achieve this?
Approach 1
Creating two separate application for admin and user like
example.com for user and admin.example.com
So that I can include all the css and js files of respective design in index.html
Approach 2
Integrating in one application where url will be example.com for user and example.com/admin for admin.
but then my question is where will the asset file will in included for both user and admin where the respective template will be created.
Please help and pardon me if the question framing is not correct.
The second approach looks better to me.
Where to include assets and where to create the template?
Have all the Components (admin + user components)in the Components folder, and in App.js, while defining the routing, provide components to routes accordingly. For example:
for path="/", it should provide component <UserHome/>
for path="/admin/", it should provide <AdminHome/>
Hope that answers your question.
Both these are equally good.
Would recommend method 2 if there is any common data or function between them
Related
I want to do three things in my application, but I’m not figuring out how I could do that using Next.js router.
The default URL of the application should be 'https://localhost:3000/en'
It should also be possible to have 'https://localhost:3000/es' as a valid URL
Anything different than '/es' should redirect to '/en'
(This parameter will influence on the displayed language of the application.)
Considering those three points, should I create inside pages folder a new folder called language and put my index.tsx file and all the others routes that I have?
Example here
If I do that, what are the rules that I should create on my next.config.js to match with the criteria that I listed above? If not, what could be another approach to solve this?
My story:
I want to launch very quickly one page, but I am really bad at CSS. I know react and wanted to get better there so I bought two application templates from themeforest. One is landing page, another one is kind of a dashboard page. All styled, independently works great. Now I would like to integrate them into a one application, so when user clicks on "login" in landing page he will be redirected to the dashboard application login page. Both applications are indepented. Both are made using CRA. Backed will be writted in .NET.
How should I do this? What are the best ways to do this? I could "copy-paste" some of the files of the smaller application (landing) to the dashboard app and change the root of the react, this is doable but will take some time to move everything, and build properly. Maybe there is another way that you can think of?
Most of the react developers(not good in CSS) will be in a similar situation. There is no readily available solution I can think of. I suggest you to manually go through the landing.html and dashbaord.html and split it into 2 react components minimum. You mentioned that you know react, so it will be easy for you. The toughest part for you will be resolving CSS class conflicts. The two HTML files might be using the same classes. Here you need to go case by case or change the names of the CSS class for either landing-style.css file or dashboard-style.css file.
Time to learn CSS basics. Good luck with your CSS learning.
Why to merge the codebase, instead deploy them separately.
For example:
Let's deploy landing page to www.example.com and dashboard to app.example.com.
Once the user clicks on signup/sign-in just redirect to app.example.com.
This way you can focus on important aspects of each application.
Landing page for SEO and dashboard for new features.
I am working on an application which uses angularjs 1.6 for the frontend and codeigniter for the backend. Till now the home page in my application had the login form and the logic for that functionality was written in homeCtrl.js. Due to new design changes for the application, the login form is now part of the header. So I am clueless about how to implement the login functionality throughout the application as the header will be a part of all the pages. Can I use the existing code without breaking the functionality as I have a deadline to meet.
Yes, you can implement this logic. Use proper routing.
You can refer to this link.
Make use of UI-Router
This article makes use of ui-router library which you need to include.
In normal scenarios you will be having only simple states and one
state will be assoaciated with one view. But here you can configure
multiple views with your state.
UI Router with Multiple Views
In your case, for the home page header will contain the login form.
And for the other pages it will contain the actual header or whatever
you want. You can configure as many sub screens as you want.
You may get the UI-Router cdn path here
I've been messing around with Angular and i wanted to split all the files up according to their role in my app.
I want a folder for each "page" like /home or /products and take care of everything within their respective folder(It sounded like a great idea).
However, now i'm not sure how to approach loading these files in or even where to do it.
This is my current file structure:
Due to certain limitations im not able to use other helpful tools, this needs to happen in the code directly.
What would be the best way to approach this?
1st part of your question:
There's no default way to organise your angular app.
However, there are some guidelines. I keep thanking myself for reading the Angular 1 app-structuring-guidelines by John Pappa which enlightened me on the same question you are asking.
At the moment, I have organised all my apps in a folder-by-functionality apprach rather than a folder-by-type one (i.e. all controllers in a controllers folder, all services in a services folder,etc).
2nd part of your question:
Just use Gulp or Grunt and then import the single file in your index
The Web is getting more and more component oriented, now all the most famous frontend frameworks adopt a reusable component policy (React and Angular 2 relies heavily on it)
If you want your angular app to be as modular as possible, you have to put everything regarding a component in a separate folder (html templates,css styles and js logic),and split the shared logic between services and assets
In Your case an example of project structure could be:
app/
assets/
//put here images,fonts and shared styles
services/
apiService.js
utilsService.js
etc etc ...
components
home/
home.js
home.css
home.html
products/
products.js
products.css
products.html
etc etc/...
index.js
index.html
I'm brand new to angular, and am still deciding whether or not I want to use it. I'm looking to have 2 separate 'base' pages in my app: an authenticated one and an unauthenticated one. They have different skeletons with different content areas. So, I can't just redirect to separate partials, but rather an overall html.
Is there a way to have 2 apps, 1 for index1.html and one for index2.html?
OR
Is there an easier way to do this? Or is this just not what angular is built for?
You can use ngInclude to conditionally change the contents of various parts of the page. That way your header and footer can change depending on whether or not the user is authenticated, while the main content area is still serving content based on your routes.