Bootiful Development with Spring Boot and React

  • To simplify development and deployment, you want everything in the same artifact, so you put your React app “inside” your Spring Boot app, right?
  • But what if you could create your React app as a standalone app and make cross-origin requests to your API?
  • A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production).
  • This session shows how to develop with Java 8, Spring Boot, React, and TypeScript.
  • You’ll learn how to create REST endpoints with Spring MVC, configure Spring Boot to allow CORS, and create an React app to display its data.

To simplify development and deployment, you want everything in the same artifact, so you put your React app “inside” your Spring Boot app, right? But what if you could create your React app as a standalone app and make cross-origin requests to your API? A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production). This session shows how to develop with Java 8, Spring Boot, React, and TypeScript. You’ll learn how to create REST endpoints with Spring MVC, configure Spring Boot to allow CORS, and create an React app to display its data. If time allows we’ll cover authentication with OpenID Connect and deployment to Cloud Foundry.
Continue reading “Bootiful Development with Spring Boot and React”

Creating a chat web app using Express.js, React.js & Socket.io

  • Implementing Send Message functionalityLet’s go back to our Client’s Chat.js Component and add the following functionality to our button:Now let’s create this.sendMessage function:in Constructor add the following:Great.
  • You are now sending the message to the server every time you click ‘Send Message’, and then your message input is cleared so you can write another message.
  • All we have to do now is tell the server to emit the message to everyone who’s socket is connected to our server.In app.js on the server side add the following code:What we are doing here is that we are emiting the info we received from the client (author and…
  • Now all that’s left to do is to catch that emit on the client side and add the message to our messages array.Back in the Chat.js component on the client side add the folloing in the constructor:I will now post how all the files should look like:Chat.jsapp.jsThis function will catch…
  • We already implemented a messages.map functionality so now every time you add a message you should see it in your chat.

In this article I will be creating a chat web app using Express.js, React & Socket.io. I will be using Bootstrap for styling. You will see how the final files should look like in the end. We will now…
Continue reading “Creating a chat web app using Express.js, React.js & Socket.io”

Replacing WebSockets with the Auto-Scaling Firebase Database.

  • A very basic implementation of this object (Which I will refer to as a “packet” moving forward) can be seen below:{ type: “Ping”, sentFrom: “client”}This is a simple “Ping” packet that was sent from the client, which means the server’s database observer should pick it up, but what should this…
  • In order to only get the packets from the client we want we’re going to need their user-id, for this example I’m going to use “abcdefghijklmnop” as the user’s Firebase uid.const ref = packets = .
  • on(“child_added”, handlePacket);This will create an observer for user “abcdefghijklnop” which will listen for all packets “sentFrom” the client.
  • endAt to server so that we make sure that the server and client are listening to each other and not themselves.In the handlePacket function you should immediately remove the packet from the database and then continue using any additional information sent with the packet to handle it appropriately.
  • In this case we’re only sending the type and since this is a simple Ping-Pong example, I’m going to simply respond to the client by writing a packet with the type of “Pong” to the database.function handlePacket(snapshot) { var value = snapshot.val(); // Get the packet data if(!

If you’ve ever created an web (or react-native) application that required live updates to be sent to the client from the server, you’ve probably implemented Web Sockets at some point, and if your…
Continue reading “Replacing WebSockets with the Auto-Scaling Firebase Database.”

Deploy create-react-app with PM2 – Ygam Retuta

Deploy create-react-app with PM2  #expressjs #pm2 #react #javascript #reactjs

  • js on localhost:3000 if no port is providedSteps:npm install -g pm2cd into your project directory then pm2 ecosystemedit ecosystem.config.js with:4.
  • setup: pm2 deploy ecosystem.config.js staging setup6.
  • deploy: pm2 deploy ecosystem.config.js staging7.
  • setup whatever proxy server you want to use.
  • here is an example for nginx:listen 80 default_server;server_name _;location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Host $host; proxy_set_header Connection ‘upgrade’; proxy_cache_bypass $http_upgrade; }Gotchas:npm command not found: issue publickey:

Deploy create-react-app with PM2. we want to deploy a create-react-app on a virtual server because for some reason we cannot use a cloud-based deployment.
Continue reading “Deploy create-react-app with PM2 – Ygam Retuta”

Building a personal website from start to finish – YUDIAN ZHU – Medium

  • Recently, I built a personal website and would like to share the steps here for reference.These are the steps I take:1.
  • Visual Tools like CyberDuck and FileZilla helps you to drag files directly to the server which is quite convenient.
  • After we finish it we can polish it again and again.The following are sketches I draw for website design.
  • I chose create-react-app to construct.Following the guide of create-react-app and split the different parts of my website.Filling in contentsPut up the introduction of your wbesite and show the viewer what this website is all aboutDeploy to serverrun the commandnpm run buildupload the build files to the server.
  • The server will look for the index file and show it on the website.Polish the websiteConsider that your website is not perfect enough?

Web beginners are usually quite confused where to start to build a website. Recently, I built a personal website and would like to share the steps here for reference. These are the steps I take:
1…
Continue reading “Building a personal website from start to finish – YUDIAN ZHU – Medium”

Getting up and running with #reactjs @FableCompiler and Suave on #netcore #fsharp

  • The Fable compiler is used to compile the F# client code to JavaScript so that it can run in the browser.
  • If you look at then you will see code that is shared between client and server.
  • NET core and for the client the Fable compiler is translating it into JavaScript.
  • With Expecto you write tests as values in normal code.
  • If you are in development mode then you can use Expecto’s focused test feature to run a selected test against the running server.

fable-suave-scaffold – Working sample of a Suave + Fable + Elmish project with hot reloading
Continue reading “Getting up and running with #reactjs @FableCompiler and Suave on #netcore #fsharp”

Thoughts on Redux – Pietro Ghezzi – Medium

Important read: Thoughts on #Redux  #ReactJS #JavaScript

  • Mostly for CRUD operations.The first problem was to denormalize the entire state (the use of the library “normalizr” is encouraged by redux docs, I didn’t know it when I started and I did it manually) in a way to split it in small pieces, each with a reducer.
  • It’s useful and speeds up a lot the development process.DemoSummary of my pros and consProsTest driven development is made easy, thanks to pure functions, and increases the development productivityOnly the root component (I call it container) is connected to the reducer, all the actions and state are passed through props.
  • This makes it easy to use component composition and write stateless components.Code linearity, everything is simple and doesn’t differ much from one project to another.Immutability: forcing to keep an immutable state helps a lot avoiding weird bugs.The Log middleware in dev mode, showing all the different states before and after an action is dispatched, is of a great help.ConsIt’s difficult to handle relationships and there isn’t any official library with documentation and support to help you with it.Redundant code, every action is written manually, even the most common, like changing an attribute of the state.Normalizing a complex state with many level of nested objects doesn’t always seem the best approach.My best practicesDirectory structure by module instead of scope.
  • A better approach it could be to retrieve the new state from the server when necessary and handle the state relationships on the database layer.TDD on reducers, tests on reducers not only speed up the development but also cover you on possible “silent” bugs on the state.Keep components simple and use component composition.Normalize the state with the use of Reselect libraryHandling complex store relationships (#386)Note from Dan AbramovDeleting is always tricky because there is no first class notion of a schema.
  • These reducers will know when to remove IDs from foreign key fields because they know what the schema looks like.Dependencies I will consider in for managing complex form stateRedux-ormA small, simple and immutable ORM to manage relational data in your Redux store.It would be great if CRUD operations were managed with the model declaration with no need to write actions manually.Redux UIGood solution to separate the UI state from the application state.NormalizrLibrary suggested in the official redux documentation for normalizing the application state.Main dependencies for this projectReactReduxReact router v2Redux ThunkReact DnDReselectStyled componentsReact BootstrapBootstrap Material DesignJestConclusionRedux is a good solution for handling complex interface, it is very similar to flux architecture, but if I have to rewrite the application, I would do it in a different way.I would avoid to specify all the logic on the client, moving a part on the server side.A good approach I have seen in some projects, it is to dispatch the actions to the server and with a websockets connection, notify all the connected clients of the changes made.This way the client is responsible only to denormalize and normalize the state received by the server, handle the UI state and presenting the data.On the server side is much easier to handle relationships with an ORM provided by a web framework.This project has been of a great help to make me understand all the caveats redux can reserve for a medium size application.

I have been working on my first project with Redux for the last few weeks. An admin interface to manage and create questionnaires about patients data collection. When writing a small application…
Continue reading “Thoughts on Redux – Pietro Ghezzi – Medium”