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

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

The Contribution of US Broadband Infrastructure to GDP: Acknowledgements & References

Authors:
(1) Matthew Sprintson
(2) Edward Oughton Table of Links Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Acknowledgements and References 6 Conclusion In this paper, we assessed the macroeconomic impacts of the Broadband, Equity, Access and Deployment program, American Connectivity Program, and Tribal Broadband Connectivity Program. We firstly evaluated the program allocation and enrollment on a state-by-state basis, Secondly, we estimated the national GDP impact by using national accounting data to report the downstream impacts via the Ghosh Supply-side model and upstream impacts via the Leontief Demand-side model. To our knowledge, this is the first macroeconomic assessment of the broadband infrastructure programs within the Bipartisan Infrastructure Law. In general, we found that higher BEAD allocations target areas with poor current broadband supply. While this may be logical, as it illustrates funding going to areas most in need, this could not have been assumed a priori given politically-motivated funding is not always rationally allocated. We also found some outliers with BEAD allocations, for example, with Alaska receiving roughly US $39,000 per unconnected household. Moreover, Louisiana ACP enrollment is twice as high as the mean state enrollment, with around 26.6% of homes enrolling (versus a mean of 13.3%). In terms of macroeconomic impact, the total direct contribution to US GDP by the program could be as high as US $84.8 billion, $55.2 billion, and $5.99 billion for the BEAD program, ACP, and TBCP, respectively. Overall, the broadband allocations could expand US GDP by $146 billion, with a multiplier of 2.45. The NAICS industries that may benefit the most from these programs include the Information sector (NAICS 51, $16.9 billion), the Professional, Scientific, and Technical Services Sector (NAICS 54, $11.9 billion), and the Manufacturing Sector (NAICS 31-33, $6.85 billion). Insights about the supply-chain industry were also evaluated, including the relative interdependencies of sectors on broadband telecommunications and how certain sectors were more reliant on high-speed, reliable Internet as a value-added input good than other sectors (Agriculture, forestry, fishing, and farming; NAICS 11; 84.6% downstream and Retail Trade; NAICS 44-45; 99.8% downstream). As with any method, there are relevant limitations which are worth highlighting. Firstly, the IO approach in this paper is static and does not account for potential dynamic impacts in the macroeconomy as supply and demand forces play out in a market environment. Thus, we do not account for structural changes or how measured stimulus would alter sectoral interdependencies. Like other IO approaches, we assume constant proportionality of industry inputs, so there are no changes to the original technical coefficients matrix regardless of sectoral augmentation from additional output, increased productivity, or novel technologies (Galbusera & Giannopoulos, 2018; Miernyk, 1966). Moreover, this approach depends on constant returns to scale, with no decreasing marginal cost of production as output increases. Importantly, this IO model approach produces the upper bound on GDP impacts, so growth could be lower than projected (Jones, 1968; Oosterhaven, 1988; Walheer, 2020). One real benefit of an IO approach is understanding potential inter-sectoral interactions, which has driven the focus of this paper to supply linkage analysis. Future research could expand the methodology in this paper to focus on dynamic macroeconomic modeling strategies to study how spending increases from building new broadband infrastructure compares to the estimates produced here. Additionally, future studies could examine how to better allocate funding towards future infrastructure investments, ideally maximizing the effectiveness of allocations through the BEAD and ACP enrollment programs. This paper is available on arxiv under CC0 1.0 DEED license. Authors: (1) Matthew Sprintson (2) Edward Oughton Authors: Authors: (1) Matthew Sprintson (2) Edward Oughton Table of Links Abstract and Introduction Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Conclusion Acknowledgements and References Acknowledgements and References 6 Conclusion In this paper, we assessed the macroeconomic impacts of the Broadband, Equity, Access and Deployment program, American Connectivity Program, and Tribal Broadband Connectivity Program. We firstly evaluated the program allocation and enrollment on a state-by-state basis, Secondly, we estimated the national GDP impact by using national accounting data to report the downstream impacts via the Ghosh Supply-side model and upstream impacts via the Leontief Demand-side model. To our knowledge, this is the first macroeconomic assessment of the broadband infrastructure programs within the Bipartisan Infrastructure Law. In general, we found that higher BEAD allocations target areas with poor current broadband supply. While this may be logical, as it illustrates funding going to areas most in need, this could not have been assumed a priori given politically-motivated funding is not always rationally allocated. We also found some outliers with BEAD allocations, for example, with Alaska receiving roughly US $39,000 per unconnected household. Moreover, Louisiana ACP enrollment is twice as high as the mean state enrollment, with around 26.6% of homes enrolling (versus a mean of 13.3%). In terms of macroeconomic impact, the total direct contribution to US GDP by the program could be as high as US $84.8 billion, $55.2 billion, and $5.99 billion for the BEAD program, ACP, and TBCP, respectively. Overall, the broadband allocations could expand US GDP by $146 billion, with a multiplier of 2.45. The NAICS industries that may benefit the most from these programs include the Information sector (NAICS 51, $16.9 billion), the Professional, Scientific, and Technical Services Sector (NAICS 54, $11.9 billion), and the Manufacturing Sector (NAICS 31-33, $6.85 billion). Insights about the supply-chain industry were also evaluated, including the relative interdependencies of sectors on broadband telecommunications and how certain sectors were more reliant on high-speed, reliable Internet as a value-added input good than other sectors (Agriculture, forestry, fishing, and farming; NAICS 11; 84.6% downstream and Retail Trade; NAICS 44-45; 99.8% downstream). As with any method, there are relevant limitations which are worth highlighting. Firstly, the IO approach in this paper is static and does not account for potential dynamic impacts in the macroeconomy as supply and demand forces play out in a market environment. Thus, we do not account for structural changes or how measured stimulus would alter sectoral interdependencies. Like other IO approaches, we assume constant proportionality of industry inputs, so there are no changes to the original technical coefficients matrix regardless of sectoral augmentation from additional output, increased productivity, or novel technologies (Galbusera & Giannopoulos, 2018; Miernyk, 1966). Moreover, this approach depends on constant returns to scale, with no decreasing marginal cost of production as output increases. Importantly, this IO model approach produces the upper bound on GDP impacts, so growth could be lower than projected (Jones, 1968; Oosterhaven, 1988; Walheer, 2020). One real benefit of an IO approach is understanding potential inter-sectoral interactions, which has driven the focus of this paper to supply linkage analysis. Future research could expand the methodology in this paper to focus on dynamic macroeconomic modeling strategies to study how spending increases from building new broadband infrastructure compares to the estimates produced here. Additionally, future studies could examine how to better allocate funding towards future infrastructure investments, ideally maximizing the effectiveness of allocations through the BEAD and ACP enrollment programs. This paper is available on arxiv under CC0 1.0 DEED license. This paper is available on arxiv under CC0 1.0 DEED license. available on arxiv

Evaluating the Macroeconomic Impacts of Broadband Funding from the Bipartisan Infrastructure Law

Authors:
(1) Matthew Sprintson
(2) Edward Oughton Table of Links Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Acknowledgements and References 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? Undertaking a key linkage analysis of the industrial sectors most affected from this investment, we quantify the impacts on both upstream and downstream industries (depending on whether the investment is targeted at the supply-side or demand-side). The information sector (NAICS 51) is expected to grow the most, by as much as US $16.9 billion, compared to all other industries. This growth is distinguished by up to $9.06 billion (53.6%) in downstream impact and $7.84 billion (46.4%) in upstream impact. The BIL investment would see this sector increase by over 0.15% over the next five years, due to greater reliance on Internet services, thanks to expanded access to wireline broadband. The sector with the second-largest growth is estimated to be the Professional, Scientific, and Technical Services sector (NAICS 54). Growing by as much as $11.9 billion, through $7.65 billion downstream (64.3%) and $4.29 billion upstream (36.1%). As businesses and economies gain access to wireline broadband and high-speed Internet, they can use these services to organize and communicate, contributing to the upstream effects. The large downstream quantity is likely because of broadband’s dependency on this sector for development and service. Interestingly, in sectors such as Retail Trade (NAICS 44-45, $2.51 billion) and Health Care and Social Assistance (NAICS 62, $2.077 billion), downstream effects ($2.45 billion, 97.7% and $2.08 billion, 99.8%, respectively) outweigh the upstream effects ($0.065 billion, 0.03% and $.0034 billion, 0.163%, respectively), possibly because these industries are more reliant on broadband as a production input. Even though post-COVID trends suggest consumers are generally returning to physical brick-and-mortar stores, more consumers now value the access and convenience of online retail and purchasing, so the retail industry is becoming increasingly reliant on broadband connectivity to make sales (Brüggemann & Olbrich, 2023; Inoue & Todo, 2023; Sen et al., 2023). Likewise, Health Care is also becoming more reliant on broadband for record storage and interhospital communication. The growth in these sectors implies that they stand to gain significantly more from an increased availability of broadband rather than the increased demand for broadband. The opposite is true for the Arts, Entertainment, and Recreation Services (NAICS 71), a sector that is affected more by the upstream effect ($0.843 billion, 80.3%) rather than the downstream ($0.207 billion, 19.7%). As consumers connect to new or faster broadband, they also connect to online content sources. However, instead of the Entertainment industry relying on broadband, the consumer utilizes these services to access content. Therefore, it is reflected in the demand-side of the model rather than the supply-side, as Entertainment benefits more from the increased demand for broadband rather than from its increased availability. A similar rationale is likely the cause for the opposite split in the Agriculture, Forestry, Fishing, and Hunting sector (NAICS 11, $.296 billion), which is also the sector that is projected to grow the least, with the downstream impact ($0.250 billion, 84.6%) far outweighing the upstream impact ($0.046 billion, 15.4%). In general, the results we find here suggest that the most interconnected industries are projected to see the largest increase in growth from the investment programs, such as the Information sector (NAICS 51, $16.9 billion) and Professional, Scientific, and Technical Services (NAICS 54, $11.9 billion). This paper is available on arxiv under CC0 1.0 DEED license. Authors: (1) Matthew Sprintson (2) Edward Oughton Authors: Authors: (1) Matthew Sprintson (2) Edward Oughton Table of Links Abstract and Introduction Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Conclusion Acknowledgements and References Acknowledgements and References 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? Undertaking a key linkage analysis of the industrial sectors most affected from this investment, we quantify the impacts on both upstream and downstream industries (depending on whether the investment is targeted at the supply-side or demand-side). The information sector (NAICS 51) is expected to grow the most, by as much as US $16.9 billion, compared to all other industries. This growth is distinguished by up to $9.06 billion (53.6%) in downstream impact and $7.84 billion (46.4%) in upstream impact. The BIL investment would see this sector increase by over 0.15% over the next five years, due to greater reliance on Internet services, thanks to expanded access to wireline broadband. The sector with the second-largest growth is estimated to be the Professional, Scientific, and Technical Services sector (NAICS 54). Growing by as much as $11.9 billion, through $7.65 billion downstream (64.3%) and $4.29 billion upstream (36.1%). As businesses and economies gain access to wireline broadband and high-speed Internet, they can use these services to organize and communicate, contributing to the upstream effects. The large downstream quantity is likely because of broadband’s dependency on this sector for development and service. Interestingly, in sectors such as Retail Trade (NAICS 44-45, $2.51 billion) and Health Care and Social Assistance (NAICS 62, $2.077 billion), downstream effects ($2.45 billion, 97.7% and $2.08 billion, 99.8%, respectively) outweigh the upstream effects ($0.065 billion, 0.03% and $.0034 billion, 0.163%, respectively), possibly because these industries are more reliant on broadband as a production input. Even though post-COVID trends suggest consumers are generally returning to physical brick-and-mortar stores, more consumers now value the access and convenience of online retail and purchasing, so the retail industry is becoming increasingly reliant on broadband connectivity to make sales (Brüggemann & Olbrich, 2023; Inoue & Todo, 2023; Sen et al., 2023). Likewise, Health Care is also becoming more reliant on broadband for record storage and interhospital communication. The growth in these sectors implies that they stand to gain significantly more from an increased availability of broadband rather than the increased demand for broadband. The opposite is true for the Arts, Entertainment, and Recreation Services (NAICS 71), a sector that is affected more by the upstream effect ($0.843 billion, 80.3%) rather than the downstream ($0.207 billion, 19.7%). As consumers connect to new or faster broadband, they also connect to online content sources. However, instead of the Entertainment industry relying on broadband, the consumer utilizes these services to access content. Therefore, it is reflected in the demand-side of the model rather than the supply-side, as Entertainment benefits more from the increased demand for broadband rather than from its increased availability. A similar rationale is likely the cause for the opposite split in the Agriculture, Forestry, Fishing, and Hunting sector (NAICS 11, $.296 billion), which is also the sector that is projected to grow the least, with the downstream impact ($0.250 billion, 84.6%) far outweighing the upstream impact ($0.046 billion, 15.4%). In general, the results we find here suggest that the most interconnected industries are projected to see the largest increase in growth from the investment programs, such as the Information sector (NAICS 51, $16.9 billion) and Professional, Scientific, and Technical Services (NAICS 54, $11.9 billion). This paper is available on arxiv under CC0 1.0 DEED license. This paper is available on arxiv under CC0 1.0 DEED license. available on arxiv

How Broadband Funding Drives Growth in Key Industries

Authors:
(1) Matthew Sprintson
(2) Edward Oughton Table of Links Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Acknowledgements and References 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? We find that the US $59.7 billion investment from the Biden administration’s Bipartisan Infrastructure Law could lead to a total macroeconomic impact of up to $146 billion, given an indirect impact of $86.3 billion (59.1%). This is based on the direct investment being spent on building out (predominantly) new fixed broadband infrastructure for cost items such as civil engineering, active equipment deployment, and the associated labor necessary to connect households to high-speed broadband Internet. Whereas, the indirect investment represents both industries utilizing broadband to grow their customer base and the multiplier effects of employed labor undertaking secondary spending in the economy. Our research estimates that overall, the BIL investment may reach a return multiplier as high as 2.45, which is slightly larger than other infrastructure investment estimates in the literature, such as by Dimitriou (2.2) (Dimitriou et al., 2015). Therefore, this spending could boost GDP growth, while also potentially providing long-term opportunities for (particularly rural) households at a time when our reliance on high-speed broadband connectivity is growing. Thus, there is a strong need to overcome market failure in areas of current poor broadband service. Proponents argue that the lack of infrastructure necessitates the passage of the BIL, as the return on investment to national GDP outweighs the cost to the taxpayers. Additionally, as the estimated $146 billion in GDP trickles through the macroeconomy, there may be other economic benefits, ranging from productivity gains to increased entrepreneurship. The broadband programs within the Bipartisan Infrastructure Law are the largest federally-directed investment in broadband infrastructure to date. The program’s goals are similar to those of the Rural Electrification Act (REA) in the 1930s, established by Franklin D. Roosevelt as an investment associated with the New Deal (Record Group 221, 1934). At the time, many detractors argued that the program was too expensive. However, as evidence has shown, the investment laid the foundation for nearly a century of economic development, improving the quality of life of citizens and expanding business opportunities, especially for rural regions (Bouzarovski et al., 2023; Olanrele, 2020; Tierney, 2011). Similarly, many critics of the programs take issue with the significant government investment at a time when fiscal headroom is at a minimum. Recently, many congressional representatives have voiced their concerns about government spending, stating “...we have no money” and “there’s no money in the house” (Davis, 2023; Sforza, 2023). Concern has been growing about the current administration financing government spending through deficit spending, for example, with the US budget deficit effectively doubling in 2023, with the ongoing expansion of a range of federal programs, such as BEAD, ACP, and the TBCP (Gopinath, 2023; Rappeport & Tankersley, 2023). This paper is available on arxiv under CC0 1.0 DEED license. Authors: (1) Matthew Sprintson (2) Edward Oughton Authors: Authors: (1) Matthew Sprintson (2) Edward Oughton Table of Links Abstract and Introduction Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Conclusion Acknowledgements and References Acknowledgements and References 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? We find that the US $59.7 billion investment from the Biden administration’s Bipartisan Infrastructure Law could lead to a total macroeconomic impact of up to $146 billion, given an indirect impact of $86.3 billion (59.1%). This is based on the direct investment being spent on building out (predominantly) new fixed broadband infrastructure for cost items such as civil engineering, active equipment deployment, and the associated labor necessary to connect households to high-speed broadband Internet. Whereas, the indirect investment represents both industries utilizing broadband to grow their customer base and the multiplier effects of employed labor undertaking secondary spending in the economy. Our research estimates that overall, the BIL investment may reach a return multiplier as high as 2.45, which is slightly larger than other infrastructure investment estimates in the literature, such as by Dimitriou (2.2) (Dimitriou et al., 2015). Therefore, this spending could boost GDP growth, while also potentially providing long-term opportunities for (particularly rural) households at a time when our reliance on high-speed broadband connectivity is growing. Thus, there is a strong need to overcome market failure in areas of current poor broadband service. Proponents argue that the lack of infrastructure necessitates the passage of the BIL, as the return on investment to national GDP outweighs the cost to the taxpayers. Additionally, as the estimated $146 billion in GDP trickles through the macroeconomy, there may be other economic benefits, ranging from productivity gains to increased entrepreneurship. The broadband programs within the Bipartisan Infrastructure Law are the largest federally-directed investment in broadband infrastructure to date. The program’s goals are similar to those of the Rural Electrification Act (REA) in the 1930s, established by Franklin D. Roosevelt as an investment associated with the New Deal (Record Group 221, 1934). At the time, many detractors argued that the program was too expensive. However, as evidence has shown, the investment laid the foundation for nearly a century of economic development, improving the quality of life of citizens and expanding business opportunities, especially for rural regions (Bouzarovski et al., 2023; Olanrele, 2020; Tierney, 2011). Similarly, many critics of the programs take issue with the significant government investment at a time when fiscal headroom is at a minimum. Recently, many congressional representatives have voiced their concerns about government spending, stating “...we have no money” and “there’s no money in the house” (Davis, 2023; Sforza, 2023). Concern has been growing about the current administration financing government spending through deficit spending, for example, with the US budget deficit effectively doubling in 2023, with the ongoing expansion of a range of federal programs, such as BEAD, ACP, and the TBCP (Gopinath, 2023; Rappeport & Tankersley, 2023). This paper is available on arxiv under CC0 1.0 DEED license. This paper is available on arxiv under CC0 1.0 DEED license. available on arxiv

The Economic Ripple Effect of Broadband Investments

Authors:
(1) Matthew Sprintson
(2) Edward Oughton Table of Links Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Acknowledgements and References 5 Discussion In this section, a discussion will be undertaken where the previously articulated results are evaluated within the broader context of the research questions. 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? Generally, most states are organized inversely between BEAD Allocation and the supply of existing broadband infrastructure, indicating that the broadband investment programs in the Bipartisan Infrastructure Law allocate funding effectively, targeting communities without broadband supply or those with a significant price barrier. Indeed, our analysis finds that regions with poorer broadband infrastructure receive commensurate broadband investment via the programs available, generally suggesting the allocated capital is likely to go where there is a clear need (as opposed to politically motivated capital allocation). For example, states with lower-than-average ACP enrollment see a greater BEAD allocation, and this may be explained by the fact that households in poorly connected areas have less reason to enroll in a substandard service. Equally, areas with higher-than-average ACP enrollment see fewer BEAD resources allocated. While this pattern is consistent, there is one extreme outlier whereby the BEAD program intends to spend almost US $40k to connect each Alaskan household to broadband. Alaska adheres to the general trend we established in section 4.1, whereby only about 7.2% of Alaskan homes have enrolled in the ACP, which could suggest fewer households have broadband access. Due to the low population density in Alaska, deploying broadband infrastructure will take significantly more time and investment (Espín & Rojas, 2024). Instead of connecting to existing broadband networks within the continental United States, Alaskan providers often need to lay large quantities of greenfield infrastructure over long distances within the Alaskan wilderness. To put this investment into perspective, US $38,802 is more than half of the median household income (56%) in the United States (US $69,600) (Guzman, 2022). Connecting Alaskan households to fixed broadband rather than exploring satellite broadband access could prove costly. An Alaskan community with ten unconnected homes could receive an average of roughly US $390,000 to connect to wireline broadband, broadly equating with hiring a teacher for five years (US Bureau of Labor Statistics, 2022) or establishing scholarships for about 50 students to attend the University of Alaska (University of Alaska, 2024). Another outlying case is Texas, where a significant rural population lowers its per-capita allocation relative to other rural states. Even though Texas will receive the largest grant by far, each unconnected household will only see about US $2-3k to connect to broadband. This per-capita allocation is lower than average, and the ACP connectivity (13.8% enrollment) is approximately average. The discrepancy could result from the high number of unconnected households in Texas - which means the high allocation disperses over a greater number of houses than in other states. Additionally, the spatial distribution of homes in Texas is likely to be denser than in Alaska, and most homes will be closer to an urban area or major highway with substantial local or long-distance fiber infrastructure to connect to. These conditions make it less costly to connect Texan households to the state’s broadband network. Some states, like Ohio and New York, have high ACP enrollment and low BEAD allocations, indicating that a significant barrier to broadband adoption is potentially from lower-income households being unable to afford the service (rather than a lack of existing infrastructure). ACP enrollment in Louisiana is encouraging and shows considerably higher registration than in other states. For example, over 26% of households are enrolled in the program, compared to the nationwide average of 13.3%. Similarly, Ohio (20.7%), Kentucky (22.6%), and New Mexico (20.2%) stand out as states that have succeeded in efforts to ensure that their communities connect to the ACP. States with very high enrollment levels should be concerned as to whether this program may secure longer-term funding into the future, beyond the current administration. This paper is available on arxiv under CC0 1.0 DEED license. Authors: (1) Matthew Sprintson (2) Edward Oughton Authors: Authors: (1) Matthew Sprintson (2) Edward Oughton Table of Links Abstract and Introduction Abstract and Introduction 2. Literature Review 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.1 Reviewing Broadband Infrastructure’s Impact on the Economy 2.2 Previous Research into IO Modeling of Broadband Investment 2.2 Previous Research into IO Modeling of Broadband Investment 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 2.3 Context of the Bipartisan Infrastructure Act through Previous Research 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3. Methods and 3.1 Leontief Input-Output (IO) Modeling 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.2 Ghosh Supply-Side Assessment Methods for Infrastructure 3.3 Data and Application 3.3 Data and Application 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4. Results and 4.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 4.3 How are the supply chain linkages affected by allocations from the Bipartisan Infrastructure Law? 5. Discussion 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.2 What are the GDP impacts of the three funding programs within the Bipartisan Infrastructure Law? 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" 5.3 How are supply chain linkages affected by allocations from the Bipartisan Infrastructure Law?" Conclusion Conclusion Acknowledgements and References Acknowledgements and References 5 Discussion In this section, a discussion will be undertaken where the previously articulated results are evaluated within the broader context of the research questions. 5.1 To what extent does the Bipartisan Infrastructure Law allocate funding to unconnected communities in need? Generally, most states are organized inversely between BEAD Allocation and the supply of existing broadband infrastructure, indicating that the broadband investment programs in the Bipartisan Infrastructure Law allocate funding effectively, targeting communities without broadband supply or those with a significant price barrier. Indeed, our analysis finds that regions with poorer broadband infrastructure receive commensurate broadband investment via the programs available, generally suggesting the allocated capital is likely to go where there is a clear need (as opposed to politically motivated capital allocation). For example, states with lower-than-average ACP enrollment see a greater BEAD allocation, and this may be explained by the fact that households in poorly connected areas have less reason to enroll in a substandard service. Equally, areas with higher-than-average ACP enrollment see fewer BEAD resources allocated. While this pattern is consistent, there is one extreme outlier whereby the BEAD program intends to spend almost US $40k to connect each Alaskan household to broadband. Alaska adheres to the general trend we established in section 4.1, whereby only about 7.2% of Alaskan homes have enrolled in the ACP, which could suggest fewer households have broadband access. Due to the low population density in Alaska, deploying broadband infrastructure will take significantly more time and investment (Espín & Rojas, 2024). Instead of connecting to existing broadband networks within the continental United States, Alaskan providers often need to lay large quantities of greenfield infrastructure over long distances within the Alaskan wilderness. To put this investment into perspective, US $38,802 is more than half of the median household income (56%) in the United States (US $69,600) (Guzman, 2022). Connecting Alaskan households to fixed broadband rather than exploring satellite broadband access could prove costly. An Alaskan community with ten unconnected homes could receive an average of roughly US $390,000 to connect to wireline broadband, broadly equating with hiring a teacher for five years (US Bureau of Labor Statistics, 2022) or establishing scholarships for about 50 students to attend the University of Alaska (University of Alaska, 2024). Another outlying case is Texas, where a significant rural population lowers its per-capita allocation relative to other rural states. Even though Texas will receive the largest grant by far, each unconnected household will only see about US $2-3k to connect to broadband. This per-capita allocation is lower than average, and the ACP connectivity (13.8% enrollment) is approximately average. The discrepancy could result from the high number of unconnected households in Texas - which means the high allocation disperses over a greater number of houses than in other states. Additionally, the spatial distribution of homes in Texas is likely to be denser than in Alaska, and most homes will be closer to an urban area or major highway with substantial local or long-distance fiber infrastructure to connect to. These conditions make it less costly to connect Texan households to the state’s broadband network. Some states, like Ohio and New York, have high ACP enrollment and low BEAD allocations, indicating that a significant barrier to broadband adoption is potentially from lower-income households being unable to afford the service (rather than a lack of existing infrastructure). ACP enrollment in Louisiana is encouraging and shows considerably higher registration than in other states. For example, over 26% of households are enrolled in the program, compared to the nationwide average of 13.3%. Similarly, Ohio (20.7%), Kentucky (22.6%), and New Mexico (20.2%) stand out as states that have succeeded in efforts to ensure that their communities connect to the ACP. States with very high enrollment levels should be concerned as to whether this program may secure longer-term funding into the future, beyond the current administration. This paper is available on arxiv under CC0 1.0 DEED license. This paper is available on arxiv under CC0 1.0 DEED license. available on arxiv

Stories, News & Mentions about YUUCONNECT

Yuuconnect’s Stories on HackerNoon