I have a task to build a boilerplate for our future web applications using ReactJS/Redux/MongoDB/Node (MERN) as a basic technology stack.
Basically all of our web applications are dashboards, with a login landing page (with register/login/forgot pwd/reset pwd). The boilerplate should be driven by microservices and needs to support both web and mobile integration (using ReactJS Native). Both client and server will call my APIs, that needs to be available also as REST services for integration. The app should be isomorphic as a best practice today.
I decided to start from react-redux-universal-hot-example, but as we can see the its landing page, it may be outdated (was written in June 2015).
The basic structure of my project is being tought as the following modules:
api: The API services (REST)
auth: To handle authentication
server: Server
client: client
models: Mongo models and database access
static: Static files (images, etc.)
These are the modules I'm planning to use (mainly from react-redux-universal-hot-example):
React (basic)
React Router (to route)
Express (basic)
Babel (basic)
Webpack (basic)
Webpack Dev Middleware (for development)
Webpack Hot Middleware (for development)
Redux (for data update)
Redux Dev Tools (for development)
React Router Redux Redux/React Router bindings.
ESLint (for code styling)
redux-form (to help with forms)
lru-memoize (to form validation)
multireducer (to build a key based reducer)
style-loader (to work with css and sass)
bootstrap-sass-loader (to easily customize bootstrap colors)
font-awesome-webpack (to easily customize fa colors)
react-helmet (to manage meta tags)
webpack-isomorphic-tools (for isomorphic app)
mocha (for unit testing)
Not present in the react-redux-universal-hot-example, I would addÇ
mongoose (for Mongo access)
Auth0, JWT and passport (for authentication)
From the above path, I have the following doubts:
a) Are the modules listed above updated as for today ? Should I use something newer to the given list ?
b) Is react-redux-universal-hot-example a good starting point or shall I look for something newer, better organized or just more up to date ?
c) Is my modules/directories structure correct ? Any comments on that ?
d) Generally speaking, is this a solid base to start from ?
b) Is there something missing that would help
check out:
https://github.com/bertho-zero/react-redux-universal-hot-example#server-side-data-fetching
This is an updated fork. It has a lot of things that you want, and more. I am using it myself and I am mighty impressed.
i've updated it further. soon to put in webpack 4 and babel 7, working on it...also going to swap out react loadable for universal component, for SSR+component splitting two in one far more elegantly than loader. i cleaned up the nav so it's symmetrical on open and close, instead of opening full and closing halfway up the p0age all sketchy. updated the semantic ui pack inside, added some config for circleci and travis ci...
https://github.com/kaigouthro/react-redux-semantic-ui
https://react-redux-semantic-hotplate.herokuapp.com/templatek
as of this date, it's the furthest along fork i believe.
it's really a badass kit.
i'm going to touch it up some more, but i'm starting something fresh, making a new frankenstein that will be a spiritual successor, pieced together out of the best parts of the top boilers, and will include more auth, and libraries for animation, transitions, and layout choices. that'll take a couple months. but, in the meantime.. enjoy the update.
Related
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
I am trying to build a plug and play web based application that I should be able to integrate with multiple other web applications (which are developed using AngalurJS\ ExtJS\ ReactJS etc). On click of a button, I should be able to launch a sliding menu. On this menu, I want to add Twitter like functionality. On the first half of the menu we will have a textbox (with features like autocomplete & hash tags). The second half with show a gird which will show already posted messages. The panel will be responsible to get and post data to server.
The challenge is, I want to add this functionality to multiple other web applications with minimum configuration\changes. The consuming web applications should be able use this plugin with ease. Certain challenges I see is bootstrap does not play well with ExtJs framework & I may face similar issues with other JavaScript frameworks.
Questions:
How can I package this application? It has a panel with third party plugins (for autocomplete & other features), CSS & JavaScript. I can use web pack or Browserify but I want to keep the solution clean & don't want to add unnecessary dependency.
The consumers should be able to consume the bundle\package with ease & just by adding some references (like my bundle, css file, jquery, bootstrap).
I think, I can get the desired result with a simple ReactJs app, which I can bundle using web pack. But this will introduce other dependency. I want to keep the web application lite and simple.
I can use web pack or Browserify but I want to keep the solution clean & don't want to add unnecessary dependency.
I don't understand the problem. Using webpack or browserfy will only add devDependencies. You won't ship it. You package won't depend on it.
You won't be able to avoid using a bundler if you want to bundle it.
The consumers should be able to consume the bundle\package with ease & just by adding some references (like my bundle, css file, jquery, bootstrap).
If you distribute it via npm (de facto standard in JS), they just regularly import the resources with the correct path (e.g. node_modules/package/styles.css).
In npm you could also declare your peerDependencies (you mention jquery, bootstrap).
1. How can I package this application?
You should minify all your HTML using a build tool like grunt or gulp
If you want to keep the count of different files low, you can merge all your CSS, HTML and maybe even Images (base64 encoded) into your module.js. Ideally you could end up with only delivering a single file.
2. The consumers should be able to consume the bundle\package with ease & just by adding some references.
In that case they just need to include the script, like:
<script src="app-module.js"></script>
If you are able to use EcmaScript 2015, you might consider to package your plug-and-play app into a ES6 Module. Define your module.js simply as:
export var myNumber = 333
export function myFunction() {
...
}
And on the site, which is consuming your app, you simply add a dependency using the import keyword:
import * as service from 'module'
console.log(service.myNumber) // 333
Read more about ES6 Modules.
I'm writing Java Web application and want to use AngularJS on frontend.
But I don't want to delegate routing and security to angular, but handle it with spring. My file hierarchy in the project looks like that:
I wrote Angular controllers, services etc. And just apply it on the jsp page with some init parameters. All jsp are loaded by Spring controllers, I have some security rules for that pages. Angular also consumes REST API from this application.
The question is about efficiency of such approach. In fact I have a few SPA in here. Every time i load a page, Angular initializes from the beginning (there is about 10 pages).
The reasons I want to stay on this version are:
It's already set (Routing, Security)
It seems like I don't need to load all the scripts on the page, but only required ones
But also I have feeling I'm doing it wrong way...
Should I separate Spring and Angular and use Angular also for routing and security handling, not only for DOM manipulation.
What do you think? Do you have any suggestion?
Angular is not another jQuery, its Single page application framework.
You can look on SPAs like on ordinary external application which communicates with your backend. So there is no view or prezentation layer on server, just REST API.
Angular app should have its own routing, it doesn't make sense to combine it with spring MVC. Security lays mostly on REST, and you can use spring security on it as ussual.
Best practice is to create Angular app as separate javascript application. You can use a lot of tools from angular ecosystem which makes your work very comfortable.
During development you have your backend running, and develop Angular part separately using javascript devstack. After that you can pack the both parts to single war.
I have nice small example of Spring and Angular integration here:
https://github.com/Angular-cz/java-devstack
Unluckilly the readme is written in Czech (beautifull language :) But if you are experienced in Java and maven you will probably get it from code, I will also try to describe it here.
The bigger app with a nice module structure and jwt autentication can bee seen here:
https://bitbucket.org/angular_cz/beerapp
Both of them has similar architecture:
separate maven module for frontend and separate for backend.
javascript part use npm as package manager
developer is using gulp task runner for javascript development (it is run inside module, where gulpfile.js resides).
there is karma runner configured and several unit tests
the app connects to the backend during development using proxy running on /api for the app can have same configuration on production)
when building war, frontend module uses frontend-maven-plugin which run gulp build task same as javascript developer would
then the built minified assets are put to resources
the next part is just ordinary maven way how to put assets to /static
one more nice thing - there is also integrated e2e test under integration-test profile.
Feel free to ask if you are interested in this kind of architecture.
If React offers DOM reconciliation, is it possible to dynamically reload component's code and re-render it after I edit it?
I'm looking for a solution that allows me to edit JSX file, save it, and have the component update itself in the browser, without reloading the page, unmounting it or losing its state.
Ideally this should work without browser plugins.
You can use react-hot-loader, a drop-in Webpack loader that enables live editing for React components in your projects. No browser plugins or IDE hooks required.
It marries Webpack Hot Module Replacement (HMR) with React.
You can use this if:
Your React components donʼt have nasty side-effects;
Youʼre willing to switch to Webpack for modules (it's not hard to switch, see the walkthrough);
You have a spare couple of hours (minutes if you already use Webpack).
How it works:
It uses Webpack HMR API to learn about the “module update available” event.
It changes React.createClass calls to special createClass and updateClass functions that store the component's prototype and later update it with fresh version;
When all prototypes are updated, it calls forceUpdate to re-render the components.
There is a demo video, an explanatory blog post and a React tutorial app fork with live-edit configured.
And it's all vanilla JS.
You can, and I created an example project demonstrating how to create these facilities for yourself using ES5 and RequireJS - it works with React and also with Backbone - it could probably work with Angular and Ember etc, as long as you use AMD modules and RequireJS.
Here's all the information:
https://medium.com/#the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
the basic steps are:
gulp.js watchers listen for filesystem changes
socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed
client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)
front-end app is configured / designed to
re-evaluate all references to the modules that it wishes to
hot-reload, in this case, only JS views, templates and CSS are
available to hot reload - the router, controllers, datastores
are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.
You can see an example project here:
https://github.com/ORESoftware/hr4R
but I recommend reading the article above first.
This is a simpler more DIY implementation of hot-reloading than using Babel/ES6 and React-Hot-Loader.
Webpack was not primarily designed for hot-reloading- if it were, hot-reloading would no longer be an experimental feature, nor would it using polling to see filesystem diffs, which it currently does (see my article).
The RequireJS / AMD spec was basically made for hot-reloading, if you think about it.