YuuConnect

yuuconnect

Starting this year, I was hired by , with the main goal of helping them migrate a legacy application from to and . Since then, we have been creating solutions inside the project, that is working greatly so far. BEN Group AngularJS React Redux In this post, I intend to show the main approaches we followed and share some solutions we created, to allow us migrate the project gradually and without loose our sanity. : Our focus here, is not refactoring legacy code, but remove it as soon as possible. We avoid solutions that takes too much time or focus in changing the legacy code in order to let it “prettier”. That said, we prime to write new code with great quality. Disclaimer Move the build to webpack. This step, I consider the most import from the whole process, once with , you can start using the instruction to get your dependencies and modules and you can start getting rid of Angular’s Dependency Injection(DI). This is also necessary to start writing code in the application. Webpack import React If you use Angular’s template cache, Pug(Jade) or any other thing that influences the build, don’t worry, Webpack will have a loader for each one of them. Don’t forget to let your Webpack configured to transpile ES2015 and JSX. This step doesn’t focus on moving all the DI to imports, but instead, make your build work with . It’s important to keep that in mind, to avoid staying in this task for weeks and cause conflicts in dozens of files. Webpack In , normally, the build process gets all the dependencies you need from node_modules and insert them in the bundle. We need to keep that behavior in the new build as well. AngularJS You need to consider the legacy code as an enemy to be defeated. We need to act with caution and we need to be strategic. This also means, that in certain moments, we need to do things that aren’t pleasant. To solve that matter, we created a file , and imported all the dependencies inside it: vendor.js ( ); ( ); require 'angular' require 'angular-resource' // ...other dependencies Most of the dependencies registered themselves globally in the object, when they are imported. So, we only need to import them as the above example. Although, some of them doesn’t do that and we need to do it manually. Bellow we have an example of what we had to do with and : window moment jQuery .moment = ( ); .$ = ( ); .jquery = .$; .jQuery = .$; window require 'moment' window require 'jquery' window window window window This practice could be weird, however, you need to consider that most of the dependencies are relying on , others and others even on . window.$ onwindow.jQuery window.jquery After creating the vendors file, import it in the entry point of your application and this way, all your dependencies will be in the bundle: ( ); require './vendors' Another step, is to ensure that all your application’s files are in the bundle. The ideal, is having each module with an index file, importing controllers, factories, views, etc.. Having that, you only need to import those indexes in the application’s entry point, same way you did with vendors, as the following example: ( ); ( ); ( ); ( ); require './vendors' require './app/common/index' require './app/core/index' require './app/layout/index' If you don’t have the indexes, you can try to follow a solution a little dare, not much advised though. That would be find a regex to match all your files and import them using , as the below example: require.context {
  r.keys().forEach(r);
}
requireAll( .context( , , /\.(js|jsx)$/)); ( ) function requireAll r require './app/' true The above code, will force to include in the bundle, all and files that are inside folder and its subfolders. If you decide to follow this way, don’t forget that you may have , and even files, and you will have to exclude them in the regex. Webpack .js .jsx /app .test.js .spec.js .stories.js Also, remember that in some cases, is counting on the ordering that your files are loaded, so, this solution could end up not working at all. Angular When you finally get your build working, hurry up to create a pull request targeting your master branch. Apart , moving the build to is already a gain for your application. The Angular’s DI makes the application to be strongly coupled and is our ally against that React Webpack Webpack Render React components inside AngularJS The second most important step, because without that is not possible to migrate gradually. The idea here, is that you could use components inside , as they were directives. To achieve that, we are currently using in our project. React Angular ngReact The ngReact repo is advising to use the lib . However, we are using Angular 1.5.8 in our app, and we end up getting some problems trying to use the other lib. I already used react2Angular in another project, that were using a more recent Angular’s version and I didn’t have any issue. That said, ngReact even not being updated anymore, has all the feature we need to transform our components into directives. My advise is: choose the lib that works for you and go ahead, both are very similar react2Angular To integrate in the project, you can install it from npm: ngReact $ npm i --save ngreact And then import it in your vendors: require(' ngreact '); You also need to install and in your project: react react-dom npm i --save react react-dom And then, register module into : react Angular angular.module('app', [' react ']); With that done, we can create a component, as we would create in a regular application: Button React React ; Button = ( ); Button; import from 'react' const ( ) => { children, ...restProps } {children} < { }> button ...restProps </ > button export default And then, we define a directive that works as a wrapper for : Button Button ; props = [ , , , , ,
]; ReactButton = reactDirective(Button, props);
ReactButton.$inject = [ ]; ReactButton; import from 'path/to/Button' const 'children' 'id' 'className' 'disabled' 'etc..' const => reactDirective 'reactDirective' export default In the directive’s file, we must define the name of all the props whose are used by , in order to understands what it should pass down to the component. Button ngReact Directive defined, we need to register it in : Angular reactButton ;

angular
  .module( )
  .directive(‘reactButton’, reactButton); import from 'path/to/react-button' 'app' The Angular’s modules that you gonna use to register it doesn’t matter, just make sure it was registered in the application. Once registered, we can now use the directive in any angular’s view, as the follow example: <div> < react-button class-name="btn"></ react-button > </div> Notice that here, instead of CamelCase, we use dash to split the words. In this case, reactButton becomes react-button and , becomes . It’s important to keep that in mind, given this is a common mistake and could take hours to debug. className class-name It’s common to use to render small components inside applications, but not much productive though. ngReact AngularJS allows us to pass a parameter template in the route config. Exploring that, it’s possible to create a wrapper component for each application’s screen and then use those wrappers as the following example: Angular UI Router, $stateProvider.state( , { : , : ,
}); 'user.login' url '/login' template '<react-screen-login></<react-screen-login>' In the above example, we define a login route and pass it to a component, which is the whole Login screen. This way, we can migrate a whole screen per time, instead of migrating component by component. My gold advise here, is to install in the project, to create and test the small components. That way is easier to build solid components and then put them together into the screens. Storybook Screens: Also known as pages, they are the root component of each route. Share dependencies Define an entire screen is amazing. However, when we come to this point, we also need to share some dependencies with . Angular React In the case of BEN, the dependencies we need, was only ready after the Angular’s initialization, after it have executed its providers, config, etc... Given that, it wasn’t possible to export them using the keyword. To go around that, we created an object and a helper function to inject the dependencies. To implement that solution, we only need to create a file named with the following code: export ngDeps.js ngDeps = {}; { .assign(ngDeps, deps);
}; ngDeps; export const export ( ) function injectNgDeps deps Object export default We call inside an Angular’s process as the below example: injectNgDeps run { injectNgDeps } ;

angular
  .module( , [])
  .run([ , ,
    ($rootScope, $state) => {
      injectNgDeps({ $rootScope, $state });
    },
  ]); import from 'path/to/ngDeps' 'app' '$rootScope' '$state' We do that because we want to have access to the dependencies as soon as possible and is one of the first processes executed in the initialization. The accepts an object as argument, and merge it with the object. run injectNgDeps ngDeps When you need any dependency inside a component, you only need to do as the following: React React, { Component } ; ngDeps ; { (props) { (props); { $state, $rootScope } = ngDeps; .$state = $state; .$rootScope = $rootScope;
  }
  
  render() { import from 'react' import from 'path/to/ngDeps' class Login extends Component constructor super const this this return }
} < /> div Notice that the first thing we do, is to import . If you try to access ngDeps.$state right after the , the result will be undefined, because the process didn’t ran yet. For that reason, we access the value inside the component’s method, because the components will be instantiated only after has initialized. ngDeps import run contructor Angular We extract the dependencies from and we assigned them to the object , because this way we can access this.$state inside any class’s method ngDeps this This way it’s possible to share any Angular’s dependency with components. However, use with parsimony. Keep always in mind: Can I export this dependency using ? If the answer is yes, you always chose to use export, otherwise you use . React ngDeps export ngDeps Another thing to highlight, is that it is important to keep the access to restrict to the top components in the tree. That means screens, and possibly some containers. And then, pass down to children by props. This way it will be easier to remove when the time comes. ngDeps ngDeps Integrate Redux in the application After solve the question about sharing dependencies between both sides, we can go ahead and integrate into the application. To do that isn’t so hard, but there are some particularities though. Redux First, configure the store following the , as you would do in any application. However, once you create the object , you must export it asthe following way: docs instructions store export const store = createStore(rootReducer); That will allow us to access the object in other files in the application store In a regular application, we integrate our containers to the , using the method from . Although, that only works because we insert the with the as the root component in the application, as we can see in the lib’s docs: store connect react-redux Provider store ReactDOM.render( <MyAppRootComponent /> ,
  rootEl
) < = > Provider store {store} </ > Provider The problem is that we can’t have a single root component in our application, we have many. It’s impractical that we keep controlling that manually, which components should contain the Provider and which doesn’t. To solve that, we created a High Order Component, which abstracts that logic and insert the Provider as a wrapper when necessary. To make it accessible, I published it on and on as . Github NPM redux-connect-standalone To install it by NPM: npm i --save redux-connect-standalone And then, we can create our connect file and use the following code: createConnect ; store ; connect = createConnect(store); import from 'redux-connect-standalone' import 'path/to/youStore' export const Inside your components, instead of importing the method from , import it from the file you just created. And use it the same way you would use the original method: connect react-redux { connect } ; connect(
  mapStateToProps,
  mapDispatchToProps
)(YourContainer); import from 'path/to/youConnect' export default As we are respecting the same signature from the original method, the day you have a as your application’s root component, you will only need to execute a search replace in the import method, to replace it by: Provider { connect } ; import from 'react-redux' If you use or intend to use redux-form in your application, I also created and published a HOC to reduxForm method, the . His usage is very similar to the HOC we saw above. redux-form-connect-standalone Final words Having those recipes in hands, it’s possible to migrate your application gradually. However, there are always other complex stuff that shows up when you are migrating an application’s base technology. It’s important to keep in mind that all the solutions above are a middle ground between Angular and React. The final goal is to get rid of all of them and use the and conventions and good practices. . React Redux’s So, whenever you create a solution, think how hard will be to get it removed later If you find any interesting solution or problem, share with us. If you like this post, help us spread the word for more people to keep evolving and improving their applications.

How to migrate an application from AngularJS to React and Redux

WebSockets are mainly used to create real-time applications, such as chat apps, collaboration platforms and streaming dashboards. These applications take advantage of two-way/bidirectional communication between a server and users’ browsers. Serverless is usually associated with FaaS, an isolated stateless function that is triggered by another service. Creating a Serverless Websocket application would require you to use AWS Lambda with WebSockets in API Gateway and DynamoDB to store connections. This is overly complicated. We’ll show you how to create something faster. Serverless iFaaS platforms don’t require initialization before the function executes so you don’t pay a price for waking up a container once it has been deployed. It’s technically always live. You also have access to a baked-in key/value store which means that you don’t end up losing state between subsequent invocations. I.e. you don’t have to start from a blank slate on every invocation. Hence the lack of need for an external database such as DynamoDB. The Plan We’ll demonstrate something very simple here by using a pre-made Websocket Trigger to connect and broadcast all messages to all connected clients. See the visual workflow below. You’ll need a free to set this up yourself. Lolo account If you want to get started right away you can simply copy the contents of and paste it into a new application in a blank graph in Lolo. Save and Run the application to deploy it. That’s 1 minute of work. this document Do follow along though if you want to understand how to use it or if you want to set this up from scratch. Create an Application and add a Trigger To begin, we need to set up a new WebSocket server that can handle inbound WebSocket requests from clients. We do this by first creating a new application in your and then adding the Trigger from the Functions Gallery on the left of the graph. Add in a path name, such as . You can also rename it. Lolo account Lolo/Websocket /socket Process the Incoming Request When you add this you get three output ports in the node called , and so you need to set up ways to process these requests. Add another inline Function (i.e. a custom function) and name it Remove the in port and instead add in three in ports called , and . WebSocket Trigger req message close ‘Process Request.’ req msg close Link the ports to the right in and out ports with the nodes, look below for an illustration on how to do this. We need a bit of code to do something here with the WebSocket connection. Copy and paste in the code from below. Open up the Process Request node and paste in the code below in the handler. const connections = {};

exports.handler = async (ev, ctx) => {
  const { route, input, inputs, log, emit } = ctx;
  const { sessionId } = ev;

  // check incoming port (i.e. req, message or close)
  switch (input) {

    // on first connection
    case inputs.req:
      connections[sessionId] = {
        send: body => emit('response', { body }),
        end: () => emit('response', { end: true }),
        info: ev.headers
      }
      ev.body = { connected: true, yourConnectionId: sessionId };
      // re-route data to 'req' output port
      route(ev, 'req');
      break;

    // on subsequent messages 
    case inputs.msg:
      // re-route data to 'msg' output port
      route({ connections, message: ev.message, sessionId }, 'msg')
      break;

    // when client disconnects 
    case inputs.close:
      log.info("client has disconnected");
      delete connections[sessionId];
      break;
  }
}; The code above is checking what ports the incoming data is routed through, giving us a way to handle a new connection by adding it to connections. We are also setting up how we want to handle subsequent messages and a disconnecting client by using the in ports, msg and close. This code above though is re-routing to other nodes via the route() method as well. As you can see we have two output routes here to ‘req’ and ‘msg.’ We thus need to add those two output ports as well. Send back a response Now we have two outports in the Function that needs to go somewhere, so we create another inline Function called and paste the code below. Process Request Affirm Connection All this does is signal the listener within the WebSocket Trigger to send a response to the client. We will route the req route to this node. exports.handler = async(ev, ctx) => {
  const { emit, log } = ctx;
  // Log to the console that a client has connected
  log.info("client has connected");
  // send response to the client
  emit('response', ev);
}; Along with this we also need a way to handle subsequent messages. In this case, we said we would broadcast all messages to all clients when someone sends something. So, create another inline Function (i.e. a custom function) and call it . Paste in the code below, and see the comments to understand what it does. Handle Messages exports.handler = async (ev, ctx) => {
  // extract connections, and current session id from the event data
  const { connections, sessionId } = ev;
  // send messages
  await broadcastToAll(ctx, connections, sessionId, ev);
};

const broadcastToAll = async ({ log }, connections, currentSessionId, ev) => {

  // loop through connections
  Object.keys(connections).forEach(sessionId => {
    try {
        // send message to everyone but the current sessionId
        if (currentSessionId !== sessionId) {
        connections[sessionId].send(`${sessionId} says: ${ev.message}`)
        } 
    } catch (e) {
      log.error(e)
    }
  });
}; You can remove the out ports for both of these new Functions. Now we also have to route the data visually from the Process Request node to the other two nodes we’ve created. See these steps in action below. Save and Deploy Alright, that was it. You can save and deploy. Look in the Logs for the message to see if it is ready to use. This may take a while. We are not using any NPM modules here so should be faster but if we did we would have to wait about a minute. ‘Listening to port 4000’ Now go into the WebSocket Trigger to collect the External URL. We are going to use it to connect to this Websocket. Open two terminals on your computer and then connect via wscat on both. wscat -c wss://eu-1.lolo.co/:appId/socket Remember to NPM install wscat -g (via your terminal) first if you don’t already have wscat installed. Now you should be able to talk via the different terminals. Say hi and what’s up in either terminal and see the response broadcasted to all connected clients. You can ask a friend to connect on a different computer and talk that way. It goes without saying that you can connect this via a frontend to build a quick chat app. Remember if you are having issues, just copy the contents of and paste it into an empty graph in a Lolo application to get the entire app set up for you. this document Your Lolo app in free tier should be able to handle a few thousand of events per second. If you need more than that you simply add replicas when you configure your deployment to handle the increased load. Let us know if you have any feedback. We’re keen to create better Serverless experiences. Also published . here

Get a Serverless WebSocket Application Up and Running with Lolo in 5 Minutes

I am sure that when you first begin learning full-stack web development using the MERN stack, you will have questions like "What is it like to build a full-stack application?" What exactly are front and backend? How do we connect them? Is there any magic? etc., So I'm writing this tutorial to address your queries and show you how to build a full-stack web application. The goal of this tutorial is to provide you with a high-level overview of what it's like to build a full stack application, rather than a detailed explanation of MERN stack technologies. Note: Let's get started Prerequisites Basic understanding of MERN stack technologies. installed NodeJs account. MongoDB The Project To keep things simple while covering more concepts, we will create a simple mini-project. We will create a simple productivity tracker application in which you can record what activities you accomplished during the day and for how much time. So that we may see how we are spending our time. We can also see all of the stuff on the home page. Source code How does this work? You enter an activity and the amount of time you spent on it. The data is then submitted to the NodeJs backend. That information will be stored in the MongoDB database. All activities are displayed on the homepage. We know what we need to do; now let's figure out how to do it. Frontend/Client What is a Frontend/Client application? Client application refers to the frontend part of a full-stack application. The client sends requests to the server and receives responses. That request could be the client sending information to the server or asking for information. The client is the visible part of a full-stack application. Let's start by making a client. Make a new folder and label it "productivity-app." Create a react app called "client" using . create-react-app npx create-react-app client Start your coding editor/IDE and open the project. This is how your folder structure will look. .
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js For the time being, we are only interested in the and files. App.js App.css Remove all existing code from the and files.
Let's make a react component. App.js App.css Add the component to the file. App App.js import "./App.css";

const App = () => {
    return <div>My App</div>;
}

export default App; The above code creates and renders the component. App Run the following command in the terminal and navigate to . http://localhost:3000 npm start Design the app. We want the user to enter the name of the activity as well as the time it took. Then we'll display all of the activities on the homepage. Copy and paste this HTML code into the App component. ...
<div className="app">
  <header className="app-header">
    <h1>Productivity Tracker</h1>
    <form>
      <div>
        <label htmlFor="activity">Activity:</label>
        <input
          type="text"
          id="activity"
          name="activity"
          autoComplete="off"
        />
      </div>
      <div>
        <label htmlFor="time">Time Taken:</label>
        <input type="text" id="time" name="time" autoComplete="off" />
      </div>
      <button type="submit">Add</button>
    </form>
  </header>
  <main className="app-main">
    <h2>Today</h2>
    <ol>
        <li> Activity 1 - 3 hours</li>
        <li> Activity 2 - 10 min</li>
        <li> Activity 3 - 2 hours and 25 min</li>
    </ol>
  </main>
</div>
... Our app will now look like this. Let us now add some CSS. Copy and paste the CSS code from file into the file. this App.css Our app now appears as follows. Add logic. The activities are currently hard coded. So let's save and use activities in a state. ...
const [activities, setActivities] = useState([]);
...

...
<main className="app-main">
<h2>Today</h2>

{activities && activities.length > 0 ? (
  <ol>
    {activities.map((activity) => (
      <li key={activity._id}>
        {activity.name} - {activity.time}
      </li>
    ))}
  </ol>
) : (
  <p>No activities yet</p>
)}
</main>
... But, Where do we get our activities? How do we add an activity to the list? A backend is required to handle all of this. Backend/Server The backend component of a full-stack application is frequently referred to as the Server. A server's job is to continuously listen to requests, implement some business logic, and return the results. Database Let's create a database first before we create a server. To record and add our activities, we need a database. We can use a cloud database instead of hosting a database. MongoDB offers a free cloud database (atlas) that may be used for small/hobby projects. Log in to your account. MongoDB Create a project. Then go to "Browse collections" and create a database. For the collection name, write "activities". Click on "Overview" and then in the overview tab click on "CONNECT" -> "Connect your application". Copy the connection string. Your connection string should look like this. mongodb+srv://<username>:<password>@<clusterUrl>/<databaseName>?retryWrites=true&w=majority Save this string somewhere safe. Server We now have a database. Let us now build our application logic and connect it to the database. Make a folder called "Server" in your project folder. In the terminal, open the folder and type . Fill in all the details. npm init Install the following packages. npm i express mongoose dotenv : Used to create a server. express : Used to work with MongoDB database mongoose : Used to load environment variables. dotenv Make a file and save your connection string in a variable called "MongoDB URI". .env MONGODB_URI=yourconnectionstring Create a file and paste this code. server.js const express = require("express");
const mongoose = require("mongoose");

const app = express();

/* Loading the environment variables from the .env file. */
require("dotenv").config();

const PORT = process.env.PORT || 5000;
const MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/todoapiDB";

    /* Telling the application to use the express.json() middleware. This middleware will parse the body of
any request that has a Content-Type of application/json. */
app.use(express.json());

/* This is a route handler. It is listening for a GET request to the root route of the application.
When it receives a request, it will send back a response with the string "Hello World!". */
app.get("/", (req, res) => {
  res.send("Hello World!");
});

/* Connecting to the database and then starting the server. */
mongoose
  .connect(MONGODB_URI, { useNewUrlParser: true })
  .then(() => {
    app.listen(PORT, console.log("Server stated on port 5000"));
  })
  .catch((err) => {
    console.log(err);
  }); Run the below command and go to in your browser. You will see something like this. ( ) http://localhost:5000 Make sure you have installed globally. nodemon npm run dev This means the server is running successfully. Create a schema model to store activity. Create a folder called "models" and in that folder create a file . Copy and paste the below code. activity.model.js const mongoose = require("mongoose");

const Schema = mongoose.Schema;

/* Creating a new schema for the activity model. */
const activitySchema = new Schema({
  name: {
    type: String,
    required: true,
  },
  time: {
    type: String,
    required: true,
  },
});

module.exports = mongoose.model("Activity", activitySchema); Implement application logic in controllers. Create a folder called "controllers" and in that folder create a file . activity.controller.js We need to implement two things - 1) Get all activities to show on the homepage and 2) Add an activity. const Activity = require("../models/activity.model");

/**
 * It's an async function that uses the Activity model to find all activities and then returns a status of 200 with the activities in the response body.
 */
const getActivities = async (req, res) => {
  try {
    const activities = await Activity.find();
    res.status(200).json(activities);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
};

/**
 * It creates a new activity and saves it to the database.
 */
const addActivity = async (req, res) => {
  const activity = new Activity(req.body);

  try {
    const newActivity = await activity.save();
    res.status(201).json(newActivity);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
};

module.exports = {
  getActivities,
  addActivity,
}; Register routes to handle requests. Create a folder called "routes" and in that folder create a file . Copy and paste the below code. activity.route.js const express = require("express");

const {
  getActivities,
  addActivity,
} = require("../controllers/activity.controller");

const router = express.Router();

/* Creating a route for the get request. */
router.get("/activities", getActivities);
/* Creating a route for the post request. */
router.post("/activity", addActivity);

module.exports = router; The final folder structure will be like this. .
├── controllers
│   └── activity.controller.js
├── models
│   └── activity.model.js
├── routes
│   └── activity.route.js
├── package-lock.json
├── package.json
└── server.js Use the above routes in the app. Open the file and use the registered routes. server.js ...
const ActivityRouter = require("./routes/activity.route");
...

...
/* Telling the application to use the ActivityRouter for any requests that start with "/api". */
app.use("/api", ActivityRouter);
... Our backend is now wholly operational; we can add and retrieve data. Let's look at how to connect the backend to the front end. Connecting client and server It is not difficult to connect the client and server. It's as simple as adding a URL. Navigate to the client folder and create a file. Paste the backend URL into a variable. .env.local REACT_APP_BACKEND_URL=http://localhost:5000/api Navigate to the client folder and open . When the user clicks the button, we must make a POST request to the server via the route. App.js Add /api/activity Create a function called and add the attribute to the form element. handleSubmit() onSubmit In this function, we must send a request to the server, passing the activity name and time through the body. ...
const addActivity = async (event) => {
event.preventDefault();

const newActivity = {
  name: event.target.activity.value,
  time: event.target.time.value,
};

await fetch(`${process.env.REACT_APP_BACKEND_URL}/activity`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(newActivity),
});

event.target.activity.value = ""; // sets input empty after clicking submit
event.target.time.value = ""; // sets input empty after clicking submit
window.location.reload(); // reloads the window after sending request
};
...

...
 <form onSubmit={addActivity}>
... Enter an activity name and time, then submit. ( ) Ensure that the server is also up and running. An error message will appear in the browser console. Access to the server is banned by CORS (Cross-Origin Resource Sharing) policy, which means your server does not allow access to its resources. We may avoid this problem by using the npm package. cors Open the server folder and install the cors package. npm i cors Then use this package in . server.js ...
const cors = require("cors");
...

...
/* Allowing the frontend to access the backend. */
app.use(cors());
... Restart the server. Try to add an activity. It will work this time. You can see the data that has been added to the database. Now we must display the list of newly added activities. We must display activities as soon as the component renders. We can accomplish this by using a hook. Fetch the data from the server and save it to the state. useEffect() ...
 /* Fetching the data from the backend and setting the state of activities to the data. */
  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(
        `${process.env.REACT_APP_BACKEND_URL}/activities`
      );
      const data = await result.json();
      setActivities(data);
    };
    fetchData();
  }, []);
... Now you can see all the activities on the homepage. Hosting full-stack application Before hosting, we must keep secrets safe and avoid committing unnecessary files/folders. Open the server folder. Initialize git, create a file and paste the following stuff. .gitignore node_modules
.env Backend Heroku will be used for the backend. Create a GitHub repository for the server application and push server code to it. Access . Heroku Select "New" -> "Create new app." Give your app a name, choose a region, and then click "Create app." Navigate to Settings -> Config Vars -> Reveal Config Vars -> Add Environment Variables Here. Go to Overview and select GitHub as the deployment mechanism. If you haven't already, sign up for GitHub. Select your repository. Select "Enable Automatic Deploys" if you wish to create a deployment every time you commit to the repository.
Finally, click "Deploy Branch." Make a note of the URL of the deployed site. Frontend Netlify will host our client/frontend part. Create a GitHub repository for the client application and push client code to it. Sign in to . Netlify Select "Add Site." Select "GitHub." Give GitHub permission. Select your repository. In "Basic build settings", For base directory - Leave empty. For build command - npm run build For publishing directory - "build" Select "Show advanced" -> "New variable" In the key field, enter the and the previously copied backend URL in the value field. Put at the end of the URL. REACT_APP_BACKEND_URL /api Select "Deploy site." That's all! Open the URL in your browser and have fun 🎉🎉. Add your features and share the URL in the comments. Also read: The flow of building a full-stack web application Different ways to connect react frontend and node backend I hope this has given you an idea of how to develop a full-stack MERN application. Don't forget to subscribe to my . Newsletter Thank you! Also Published here

Get Started Building your First MERN Application - Step by Step

Build a chat app using ASP.NET

Billions of people around the world are connected to the internet, but at the same time, there are billions who are still unconnected, especially those who live in rural and remote regions. To fill this gap, SpaceX’s Starlink, Amazon’s Project Kuiper, and China’s GuoWang are all competing to provide high-speed internet via satellite constellations in low Earth orbit (LEO) to the billions of people who still cannot easily connect. Since its first launch in 2019, SpaceX has redefined the meaning of satellite internet access. As of this writing, Starlink’s constellation exceeds 7,000 satellites, with plans to reach 42,000 by 2030. Starlink, which offers speeds up to 220 Mbps, serves over four million subscribers across more than 100 countries so far. From rural communities in America to war zones like Ukraine, people can connect to Starlink where they have no other option for internet access. Starlink uses laser-based inter-satellite connectivity to enhance data transfer efficiency, reducing reliance on ground networks and making it easier for users to access the web. Amazon’s Project Kuiper, named after the Kuiper Belt, is a new player to the LEO satellite field, aiming to deploy 3,236 satellites soon. As of now, Project Kuiper is set to send its first full batch of satellites to space as early as April 28. as early as April 28 Competing with Starlink, Kuiper’s optical inter-satellite link (OISL) technology promises transmission speeds rivaling terrestrial fiber, with test results showing up to 400 Mbps. Starlink’s laser links and Kuiper’s OISL technology create mesh networks in space, enabling faster data routing without multiple ground stations. According to Amazon, its satellite system “will include more than 3,200 advanced low Earth orbit satellites, and we’ve secured more than 80 launches to deploy that initial constellation, with each one adding dozens of satellites to the network.” Amazon has invested approximately $10 billion in the project, and its new facilities in Washington and Florida underscore its commitment. However, with only prototypes in orbit, Kuiper continues to lag behind Starlink. Its next satellite launch will determine how successful Kuiper is and whether it can penetrate emerging markets. China’s satellite internet ambitions center on GuoWang, a state-owned project by China SatNet, and Qianfan, led by Shanghai-based SpaceSail. GuoWang plans a constellation of nearly 13,000 satellites, while Qianfan aims for 15,000 by 2030, starting with 648 in 2025. As with many of its projects, such as its Belt & Road Initiative (BRI) across Asia, Africa, and Europe, China aims to challenge Western dominance in space as well. With 18 satellites launched in 2024, Qianfan has now secured deals in Brazil and Kazakhstan and is hoping to negotiate more deals in other countries. Qianfan and GuoWang aim to reduce reliance on Western infrastructure as China deems Western power a threat to its national security, especially in potential conflicts such as over Taiwan. Naturally, countries in the West are concerned about Qianfan’s expansion, since this also poses a security threat for Western countries, especially with regard to data security, intelligence, and surveillance. Starlink’s advantage of being first, as well as its ability to launch, make it the frontrunner, but Kuiper’s financial backing and GuoWang’s state support could give them the boost they need to surpass Starlink. With 4 billion people lacking reliable internet, LEO constellations promise to connect remote regions where fiber and 5G are impractical. Starlink’s impact in rural Thailand and Ukraine demonstrates this potential, for instance, while Kuiper and GuoWang are working to target similar unconnected markets. However, high equipment costs and subscription fees remain an obstacle and, for the near future at least, will limit accessibility in developing economies. If the point is to connect underserved communities, these companies will need to find a way to lower costs. If they succeed, we can expect to see a completely connected globe in our lifetime – an incredible achievement for mankind.

Analyzing the Satellite Internet Race

The Lost Dream of a Free Internet & How Spacecoin is Reviving it

Can a Decentralized Internet Make Free Speech and Global Access a Reality?

7 Best Tips and Practices for Efficient Python Test Automation

Python test automatizasyonu üçün 7 ən yaxşı ipucu və praktika

7 mejores consejos y prácticas para una automatización de pruebas eficiente con Python

7 Pi bon Konsèy ak Praktik pou Efikas Python Tès Otomasyon

効率的な Python テスト自動化のための 7 つのヒントと実践

효율적인 Python 테스트 자동화를위한 7 가지 최고의 팁과 관행

ERROR: invalid target_lang (ky)

7 geriausi patarimai ir praktika efektyviam „Python“ bandymų automatizavimui

7 Маслиҳат ва таҷрибаҳои беҳтарин барои автоматизатсияи самараноки санҷиши Python

7 เคล็ดลับและแนวทางปฏิบัติที่ดีที่สุดสำหรับการทดสอบอัตโนมัติ Python ที่มีประสิทธิภาพ

7 кращих порад та практики для ефективної автоматизації тестування Python

7 Best Tips and Practices for Efficient Python Test Automation (Python Test Automation)

Iingcebiso ze-7 kunye neengcebiso ze-Python ye-Test Automation

‘‘High-Speed Internet is Infrastructure.’’ -- internetforall.gov Africa has the lowest internet connectivity rates worldwide. While recent infrastructure developments in some countries have helped increase connectivity, a significant gap remains. The average internet penetration rate is around 45% as of early 2024, which is far below the global average of 67.5%. The world is more connected than ever, and the vast majority of businesses rely on the Internet and social media to reach partners and consumers, advertise their products, or simply manage their operations. Services used by companies ranging from sales to marketing, collaboration, creating new jobs, and using mission-critical business applications. One of the biggest challenges facing users in Africa is not only access but also the quality of the internet connection. Causes vary from a lack of proper infrastructure to limited access to quality broadband solutions like 5G and fiber optic solutions. Global Internet Penetration and Challenges As per Statista's October 2024 report, countries like the Netherlands, Norway, Saudi Arabia, and Switzerland led the ranking of countries with the highest internet penetration rates, each with 99%. The worldwide penetration rate as of October 2024 was 67.5%. Recent observations show that Europe ranks first among global regions by internet population rate, with Northern America ranking second. Internet reach is higher than 80% across all European regions and America. Asia has the biggest online audience worldwide, with countries like India and China, but it also has the highest number of individuals not connected to the web. Considering the share of the population without internet access, North Korea ranks first, as the internet in the country remains blocked for most of the general public. In Africa, the Central African Republic has 89.4% of its population unconnected, followed by Burundi with 88.7%. Infrastructures and Policies Challenges In my opinion, two types of issues hinder the development and internet connectivity in Africa: technical and non-technical aspects. Technical Issues The technical aspect includes the creation and development of infrastructures, with challenges such as road access, electricity, and reliable telecommunications networks. These are essential for supporting widespread internet connectivity and ensuring that digital services can reach all regions. Policies and Regulations Non-technical aspects involve policies, regulations, and governmental support. Many African countries have adopted laws and regulations that promote favorable tech and digital development, such as tax cuts for tech companies and incentives for foreign investments. These policies are designed to create a more conducive environment for digital growth. However, some countries still face challenges due to overcomplicated regulations and tax systems, corruption, and money laundering. All these combined create a situation commonly referred to as a "bad business climate." This unfriendly business climate deters investors from establishing their companies in these countries, thus hindering technological advancement and connectivity improvements. Digitally Leading Countries In some countries, progressive policies and robust infrastructural investments have led to significant improvements in internet accessibility and quality. For instance, countries like Kenya and Rwanda have made notable strides in boosting digital infrastructure and implementing supportive regulations, which have positively impacted their connectivity rates. In contrast, other regions struggle with outdated regulations, limited governmental support, and insufficient investment in infrastructure, making it difficult to achieve widespread internet access and reliable connectivity. Addressing both technical and non-technical challenges is crucial for improving internet connectivity across Africa. By fostering a supportive regulatory environment and investing in essential infrastructure, African countries can bridge the digital divide and enhance their participation in the global digital economy. A Good Move Forward One of the proposed solutions to improve internet connectivity in Africa has been the use of mobile internet via smartphones. This option works well in areas where operators’ coverage is strong, but it is not effective everywhere. Another promising solution is the use of the internet by satellite, which can overcome the limitations of operator coverage. Satellites can cover wide areas, providing connectivity where traditional infrastructure is lacking. One of the main providers of the internet by satellite is Elon Musk’s Starlink, which is gaining popularity in less connected areas and can provide internet access with bandwidths ranging between 25 and 220 Mbps. Several countries have already started using Starlink services, including Malawi, Nigeria, Ghana, Zambia, Madagascar, and Kenya. This technology holds great potential for bridging the digital divide and bringing reliable internet access to remote and underserved regions. A Bright Future Ahead? The global number of internet users will continue to rise, and after fifteen consecutive years of growth, the number of internet users is projected to reach 7.3 billion by 2029. This trajectory points to a bright future for internet connectivity, particularly in Africa, where emerging technologies and investments in infrastructure are set to bridge the digital divide and unlock vast potential. However, leaders and decision-makers must act wisely, ensuring that policies and investments are inclusive and sustainable so that the benefits of this growth are shared by all. ‘‘High-Speed Internet is Infrastructure.’’ -- internetforall.gov ‘‘High-Speed Internet is Infrastructure.’’ -- internetforall.gov ‘‘High-Speed Internet is Infrastructure.’’ ‘‘High-Speed Internet is Infrastructure.’’ -- internetforall.gov Africa has the lowest internet connectivity rates worldwide. While recent infrastructure developments in some countries have helped increase connectivity, a significant gap remains. The average internet penetration rate is around 45% as of early 2024 , which is far below the global average of 67.5% . 45% as of early 2024 67.5% The world is more connected than ever, and the vast majority of businesses rely on the Internet and social media to reach partners and consumers, advertise their products, or simply manage their operations. Services used by companies ranging from sales to marketing, collaboration, creating new jobs, and using mission-critical business applications. One of the biggest challenges facing users in Africa is not only access but also the quality of the internet connection. Causes vary from a lack of proper infrastructure to limited access to quality broadband solutions like 5G and fiber optic solutions. Global Internet Penetration and Challenges Global Internet Penetration and Challenges As per Statista's October 2024 report, countries like the Netherlands, Norway, Saudi Arabia, and Switzerland led the ranking of countries with the highest internet penetration rates, each with 99%. The worldwide penetration rate as of October 2024 was 67.5%. Statista 's Statista Netherlands, Norway, Saudi Arabia, Switzerland Recent observations show that Europe ranks first among global regions by internet population rate, with Northern America ranking second. Internet reach is higher than 80% across all European regions and America. Europe Northern America Asia has the biggest online audience worldwide, with countries like India and China , but it also has the highest number of individuals not connected to the web. Considering the share of the population without internet access, North Korea ranks first, as the internet in the country remains blocked for most of the general public. India China North Korea In Africa, the Central African Republic has 89.4% of its population unconnected, followed by Burundi with 88.7%. Central African Republic Burundi Infrastructures and Policies Challenges Infrastructures and Policies Challenges In my opinion, two types of issues hinder the development and internet connectivity in Africa: technical and non-technical aspects. Technical Issues Technical Issues The technical aspect includes the creation and development of infrastructures, with challenges such as road access, electricity, and reliable telecommunications networks . These are essential for supporting widespread internet connectivity and ensuring that digital services can reach all regions. infrastructures, road access, electricity, reliable telecommunications networks Policies and Regulations Policies and Regulations Non-technical aspects involve policies, regulations, and governmental support . Many African countries have adopted laws and regulations that promote favorable tech and digital development, such as tax cuts for tech companies and incentives for foreign investments. These policies are designed to create a more conducive environment for digital growth. policies, regulations, governmental support tax cuts incentives However, some countries still face challenges due to overcomplicated regulations and tax systems, corruption, and money laundering. All these combined create a situation commonly referred to as a " bad business climate ." bad business climate This unfriendly business climate deters investors from establishing their companies in these countries, thus hindering technological advancement and connectivity improvements. Digitally Leading Countries Digitally Leading Countries In some countries, progressive policies and robust infrastructural investments have led to significant improvements in internet accessibility and quality. For instance, countries like Kenya and Rwanda have made notable strides in boosting digital infrastructure and implementing supportive regulations, which have positively impacted their connectivity rates. Kenya Rwanda In contrast, other regions struggle with outdated regulations , limited governmental support , and insufficient investment in infrastructure , making it difficult to achieve widespread internet access and reliable connectivity. outdated regulations limited governmental support insufficient investment in infrastructure Addressing both technical and non-technical challenges is crucial for improving internet connectivity across Africa. By fostering a supportive regulatory environment and investing in essential infrastructure, African countries can bridge the digital divide and enhance their participation in the global digital economy. A Good Move Forward A Good Move Forward One of the proposed solutions to improve internet connectivity in Africa has been the use of mobile internet via smartphones. This option works well in areas where operators’ coverage is strong, but it is not effective everywhere. Another promising solution is the use of the internet by satellite, which can overcome the limitations of operator coverage. Satellites can cover wide areas, providing connectivity where traditional infrastructure is lacking. One of the main providers of the internet by satellite is Elon Musk’s Starlink , which is gaining popularity in less connected areas and can provide internet access with bandwidths ranging between 25 and 220 Mbps . Elon Musk’s Starlink between 25 and 220 Mbps Several countries have already started using Starlink services, including Malawi, Nigeria, Ghana, Zambia, Madagascar, and Kenya. This technology holds great potential for bridging the digital divide and bringing reliable internet access to remote and underserved regions. A Bright Future Ahead? A Bright Future Ahead? The global number of internet users will continue to rise, and after fifteen consecutive years of growth, the number of internet users is projected to reach 7.3 billion by 2029 . 7.3 billion by 2029 This trajectory points to a bright future for internet connectivity, particularly in Africa, where emerging technologies and investments in infrastructure are set to bridge the digital divide and unlock vast potential. However, leaders and decision-makers must act wisely, ensuring that policies and investments are inclusive and sustainable so that the benefits of this growth are shared by all.

Africa's Internet Evolution: From Challenges to Connectivity

Zuzalu is Dead. Long Live Zuzalu! - Metamorphosis Commenced v3

Zuzalu is dood. Lank lewe Zuzalu! - Metamorfose begin v3

Зузалу мёртвы. Жыве Зузалу! - Метамарфоза пачалася v3

Ο Ζουζαλού είναι νεκρός. Ζήτω ο Ζουζαλού! - Metamorphosis Commenced v3

Zuzalu ha muerto. ¡Viva Zuzalu! - Metamorfosis comenzada v3

Zuzalu Hil da. Bizi Zuzalu! - Metamorfosia hasita v3

زوزالو مرده است زنده باد زوزالو - Metamorphosis Commenced v3

Zuzalu è morto. Lunga vita a Zuzalu! - Metamorfosi iniziata v3

ズザルは死んだ。ズザル万歳！ - 変身開始 v3

Zuzalu ແມ່ນຕາຍ. ອາຍຸຍືນ Zuzalu! - Metamorphosis ເລີ່ມ v3

Zuzalu yra miręs. Tegyvuoja Zuzalu! - Metamorfozė prasidėjo v3

Zuzalu a murit. Trăiască Zuzalu! - Metamorfoza a început v3

Zuzalu Öldü. Yaşasın Zuzalu! - Metamorfoz Başladı v3

Stories, News & Mentions about YUUCONNECT

Categories

Trending Topics

Stories, News & Mentions about YUUCONNECT

Yuuconnect’s Stories on HackerNoon

Categories

Trending Topics