If you identify yourself as a frontend developer who mainly knows one language \u2014 JavaScript \u2014 setting up a database and understanding all the backend and data layer aspects might become overwhelming pretty fast. This is the area where Begin.com<\/a> shines. Let\u2019s see why.<\/p>\n\n\n\n As a frontend developer, you want to write the frontend parts, but if need be, you could probably dabble a bit in the backend if you feel it is familiar territory.<\/p>\n\n\n\n Begin provides unparalleled, ultra-usable abstractions on top of popular AWS services<\/a> many of us are scared to configure and glue together, including AWS Lambda<\/a> and DynamoDB<\/a>. You can get from code to a working URL in 30 seconds \u2014 for free, at that.<\/p>\n\n\n\n All this makes Begin very frontend-friendly. As they say on their homepage, \u201cBegin makes serverless absurdly easy.\u201d They also add, \u201cNo servers. No config. No sweat.\u201d Let\u2019s test out these claims.<\/p>\n\n\n\n Begin may provide us with highly usable abstractions on top of AWS Lambda, but it comes with its own opinions on how to use it.<\/p>\n\n\n\n Begin is like a SaaS version of Architect<\/a>. It is a serverless framework that helps you build massively scalable serverless applications. It is open source, and its features<\/a> include the ability to work locally.<\/p>\n\n\n\n Architect has a defined project layout<\/a> and prescriptions on how to share code<\/a> between Lambda functions. With these opinions, Architect does make deploying, logging, and monitoring a breeze.<\/p>\n\n\n\n In the next step, we will see how to build a simple news app that fetches the latest US news from sources like CNN, ABC News, and The Guardian.<\/p>\n\n\n\n Before we dive into the code, below are some things you should know:<\/p>\n\n\n\n Next, we will look at how to build the news app.<\/p>\n\n\n\n By now, you know that our goal is to build a small news application that will show the latest US news from a number of sources. It will look like the example below:<\/p>\n\n\n\n This example app will have two main parts: the backend written in Node.js and the frontend in React. The data for this news app will be stored in Begin Data<\/a>, which is a very useful abstraction on top of DynamoDB. Time to get our hands dirty with some code now.<\/p>\n\n\n\n To start using Begin, please go to the homepage, click the Sign up with GitHub<\/strong> button, and authorize with your GitHub account. Begin has a generous free plan that accommodates five free apps, so please do sign up with them.<\/p>\n\n\n\n We will use a Begin example of Node.js and React to start with. We will later modify it to become our US news app.<\/p>\n\n\n\n Head over to the Begin Node + React example<\/a> app and click the Deploy to Begin<\/strong> button, as seen below:<\/p>\n\n\n\n Since we are already logged in, it will take us to the following screen:<\/p>\n\n\n\n You will need to allow Begin to access your GitHub. When you click the Create app<\/strong> button, it will create the Begin app as a new repository on your GitHub account. In my case, it created this open source GitHub repo<\/a> on my account.<\/p>\n\n\n\n It will start the CI\/CD process and deploy the app on a unique Begin URL, as seen below:<\/p>\n\n\n\n You will need to wait 2\u20133 minutes for the build and deployment process to complete, then you can visit the staging environment of your new Begin app. It has a very simple API, which React calls to show its content.<\/p>\n\n\n\n After some time, the build and deploy processes are done:<\/p>\n\n\n\n If we hit our staging URL, which, in my case, was Hooray! Our basic React app with a super-simple Node.js backend is up and running on Begin.com.<\/p>\n\n\n\n It will only deploy to production when we push a new tag on GitHub. Begin asks us to use SemVer<\/a> for releases with Git tags<\/a>.<\/p>\n\n\n\n Now we will move on to actually building our news API that will be consumed by React.<\/p>\n\n\n\n We currently have a dummy API for our example application available at The first will be accessible at First, clone the repository somewhere on your machine so you can edit it, then run As the next step, we will delete the If you want to delete it with a GUI, I leave that decision up to you.<\/p>\n\n\n\n Subsequently, we will add an A couple of important things to note here are:<\/p>\n\n\n\n For the API routes to function properly, we\u2019ll need the Then we will add the two files to serve the two API endpoints in the The first file is The main heavy lifting of the application is in this 100-line file. Let\u2019s run through the main points.<\/p>\n\n\n\n The news sources\u2019 RSS feed URLs are defined in After that, it saves the stories in the Another point to notice here is that we generate a unique key from the last 50 characters from the URL (N.B., keys<\/a> in Begin Data need to be a maximum of 50 characters). We use this same key to check whether the news already exists; if it exists, we don\u2019t save it again.<\/p>\n\n\n\n We log things like the stories and the number of news stories saved for our own reference. We also log errors should any occur.<\/p>\n\n\n\n Consequently, we will add the other This small 30-line file is pretty straightforward. It queries Begin Data to get 20 news stories. It only picks up the four fields from the response In the next section, we will see how the React code and CSS are changed to show the latest 20 news stories we pull from the Begin data table.<\/p>\n\n\n\n The example application already calls the Let\u2019s do a quick rundown of what the React app is doing. We\u2019re doing two things in the Next, we call the get news API and set it as The In addition, we will also remove We can quickly test our app locally with Congratulations! Your latest news app is working. If you want to try out what the API looks like in your local, you can hit We\u2019ll need to fix the tests written with We changed the API path in the test and simply assert that we get a response back from the API. It\u2019s not a great test, but it lets us reach our goal of deploying the API.<\/p>\n\n\n\n Now we will deploy it to Begin. To deploy the changes, we will commit and push them to GitHub. Main code changes are available as a pull request<\/a> for your reference; test code changes are in a different pull request.<\/p>\n\n\n\n We will open a pull request for the news app. After the pull request is merged, it will auto-deploy these changes on the staging environment as seen below:<\/p>\n\n\n\n After that, if we check the staging URL, we can see the app working similar to our local. We can visit staging by clicking the Staging<\/strong> link in the top left of the above page.<\/p>\n\n\n\n If we check the Data<\/strong> page, we can see that our news stories data is written on Begin Data as well:<\/p>\n\n\n\n Finally, we will deploy a production release. Click the Deploy to Production<\/strong> button and select a version \u2014 I will go with Similar to staging, it will take its time to build, and it deploys by provisioning the resources for us:<\/p>\n\n\n\n All of these updates are available via the Activity<\/strong> link. After that, we can check how the app looks in production:<\/p>\n\n\n\n You can check my app\u2019s production<\/a> version to see how it works.<\/p>\n\n\n\n Begin provides other features, too, like scheduled functions. We could have used a scheduled function in place of the You can also check out event functions<\/a>, which can replace a queue for any functionality that needs one. The example depicts an account verification email, which is a great candidate to use a queue, but it is solved very well by an event-based kind of approach.<\/p>\n\n\n\n You might also want to explore more of Begin \u2014 for instance, mapping custom domains<\/a> is another great feature. All in all, Begin provides solid abstractions on top of AWS services without locking you in.<\/p>\n\n\n\n We saw how we can deploy a full-stack JavaScript app on Begin.com using Begin Data to store our data, too. Rather than using two or three services for data, backend, and frontend, we can utilize Begin to host a full application and its data on the same service. I hope you explore more Begin features like scheduled function and customs domains to easily deploy your idea and have it working with less effort.<\/p>\n\n\n\n Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you\u2019re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\nBegin features<\/h2>\n\n\n\n
How Architect (arc.codes) is related to Begin<\/h2>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Example App: Latest US news<\/h2>\n\n\n\n
![\"Preview](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/latest-news-app-preview.png\")
<\/figure><\/div>\n\n\n\nGetting started with Begin<\/h2>\n\n\n\n
![\"Begin's](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/begin-pricing-tiers.png\")
<\/figure><\/div>\n\n\n\nCreate a Node + React app from a Begin example<\/h3>\n\n\n\n
![\"Begin's](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/begin-node-react-example.png\")
<\/figure><\/div>\n\n\n\n![\"Creating](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/creating-app-github-repo.png\")
<\/figure><\/div>\n\n\n\n![\"The](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/ci-cd-process-begin.png\")
<\/figure><\/div>\n\n\n\n![\"Our](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/build-deploy-processes-complete-staging.png\")
<\/figure><\/div>\n\n\n\nhttps:\/\/whale-ls5-staging.begin.app\/<\/a><\/code>, we will see a basic React app:<\/p>\n\n\n\n![\"Our](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/basic-react-app-staging.png\")
<\/figure><\/div>\n\n\n\nReplacing the dummy API with the news API<\/h2>\n\n\n\n
\/api<\/code>. It simply responds with a message Hello from your Begin API!<\/code>. We will delete this API and add two new GET<\/code> APIs.<\/p>\n\n\n\n\/api\/news<\/code> to get the latest news saved in Begin Data. The second can be reached at \/api\/fetch-news<\/code> to fetch the news from sources\u2019 RSS feeds and save it in the Begin data table. Let\u2019s take a look at the code to do all this.<\/p>\n\n\n\nnpm install<\/code> to get all the dependencies. To build these two new APIs, we will first remove the http<\/code> section from the package.json<\/code> file\u2019s arc<\/code> section and make it look like the below:<\/p>\n\n\n\n\"arc\": {\n \"app\": \"react-hello\",\n \"static\": {\n \"folder\": \"build\",\n \"spa\": true\n }\n},<\/pre>\n\n\n\napi<\/code> folder present on the root:<\/p>\n\n\n\nrm -rf api<\/pre>\n\n\n\n
Add the
app.arc<\/code> file<\/h3>\n\n\n\napp.arc<\/code> file that defines the routes and Begin data table we will use to store news. The app.arc<\/code> file looks like this:<\/p>\n\n\n\n@app\nreact-hello\n\n@static\nfolder build\n\n# json api\n@http\nget \/api\/news\nget \/api\/fetch-news\n\n@tables\ndata\n scopeID *String\n dataID **String\n ttl TTL<\/pre>\n\n\n\n
GET<\/code> API endpoints, \/api\/news<\/code> and \/api\/fetch-news<\/code>, which will show the news and fetch the news from our defined sources and save it on Begin Data<\/li>@tables<\/a><\/code> that tells Begin we want to add a table called news<\/code> with a time to live (TTL) field. We will find out the use of the TTL field later on.<\/li><\/ol>\n\n\n\nAdd the API routes and related files<\/h3>\n\n\n\n
rss-parser<\/code> module because we\u2019re fetching the news from the sources\u2019 RSS feeds. Install it with:<\/p>\n\n\n\nnpm i --save rss-parser<\/pre>\n\n\n\n
http<\/code> folder, as below:<\/p>\n\n\n\n![\"Our](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/app-file-structure.png\")
<\/figure><\/div>\n\n\n\nindex.js<\/code> in the get-api-fetch_news<\/code> folder. This is where most of the interesting things happen:<\/p>\n\n\n\nconst data = require('@begin\/data');\nconst Parser = require('rss-parser');\nconst parser = new Parser();\nconst table = 'news';\n\nfunction formatFeedStories(stories, source) {\n const MAX_STORIES = 10;\n let formattedStories = [];\n let count = 0;\n for (story of stories) {\n formattedStories.push({ \n headline: story.title.trim(), \n url: story.link,\n published_date: story.pubDate,\n source });\n if (count === MAX_STORIES - 1) {\n break;\n }\n count++;\n }\n\n console.log(`Formatted ${formattedStories.length} storied from ${source}`, formattedStories);\n return formattedStories;\n}\n\nasync function getStories(feedUrl, source) {\n try {\n const feed = await parser.parseURL(feedUrl);\n return formatFeedStories(feed.items, source);\n } catch (err) {\n const errMessage = `Error while parsing feed from news stories for ${source}`;\n console.log(errMessage, err);\n\n return [];\n }\n}\n\nasync function saveNewsFromSources() {\n const newsSources = [\n {\n feedUrl: 'http:\/\/rss.cnn.com\/rss\/edition.rss',\n source: 'CNN'\n },\n {\n feedUrl: 'https:\/\/abcnews.go.com\/abcnews\/topstories',\n source: 'ABC News'\n },\n {\n feedUrl: 'https:\/\/www.theguardian.com\/us-news\/rss',\n source: 'The Guardian'\n }\n ]\n let totalStoriesSaved = 0;\n\n for (newsSource of newsSources) {\n const stories = await getStories(newsSource.feedUrl, newsSource.source);\n const savedCount = await saveNews(stories);\n console.log(`Saved ${savedCount} stories from ${newsSource.source}`);\n totalStoriesSaved += savedCount;\n }\n\n return totalStoriesSaved;\n}\n\nasync function saveNews(stories) {\n const storiesToInsert = [];\n const ttl = (Date.now() \/ 1000) + (60 * 60 * 6); \/\/ 6 hours from now in seconds\n\n for(story of stories) {\n const key = story.url.slice(-50);\n const newsExists = await data.get({table, key});\n if (!newsExists) {\n storiesToInsert.push({table, key, ttl, ...story});\n }\n }\n\n if (storiesToInsert.length) {\n await data.set(storiesToInsert);\n }\n\n return storiesToInsert.length;\n}\n\nexports.handler = async function http(req) {\n try {\n const noOfStoriesSaved = await saveNewsFromSources();\n return {\n statusCode: 200,\n headers: {\n 'content-type': 'application\/json; charset=utf8'\n },\n body: JSON.stringify({message: `${noOfStoriesSaved} News stories fetched and saved!`})\n }\n } catch(e) {\n console.log(`e: ${e.message}`, e);\n return {\n statusCode: 500,\n headers: {\n 'content-type': 'application\/json; charset=utf8',\n },\n body: JSON.stringify({'message': `some error occured while fetching news, ${e.message}`})\n }\n }\n}<\/pre>\n\n\n\nsaveNewsFromSources<\/code>. In our case, we\u2019re pulling from CNN, ABC News, and The Guardian. For each of these news sources, it gets the 10 latest stories in the getStories<\/code> function.<\/p>\n\n\n\nsaveNews<\/code> function. This saves the stories in the news<\/code> table with a time to live (TTL) of 6h only if it doesn\u2019t already exist. So the stories stay in the database for a maximum of 6h, and they are auto-deleted after their TTL expires.<\/p>\n\n\n\nindex.js<\/code> file in http\/get-news-api<\/code> folder to fetch the news from the data store and serve it up as JSON.<\/p>\n\n\n\nconst data = require('@begin\/data');\n\nfunction pick(obj, attributes = []) {\n return Object.entries(obj)\n .filter(([key]) => attributes.includes(key))\n .reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {});\n}\n\nexports.handler = async function http (req) {\n const newsStories = await data.get({table:'news', limit: 20});\n let storiesToShow = [];\n\n for (newsStory of newsStories) {\n const pickedStory = pick(newsStory, ['headline', 'url', 'published_date', 'source']);\n if (pickedStory.headline) {\n storiesToShow.push(pickedStory);\n }\n }\n\n const sortedStories = storiesToShow.sort((a, b) => new Date(b.published_date) - new Date(a.published_date));\n return {\n headers: {\n 'content-type': 'application\/json; charset=utf8',\n 'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'\n },\n statusCode: 200,\n body: JSON.stringify(sortedStories)\n }\n}<\/pre>\n\n\n\nheadline<\/code>, url<\/code>, published_date<\/code>, and source<\/code>. It does a quick sort based on the date to put the latest news first, then the sorted stores are sent out as JSON. Pretty easy!<\/p>\n\n\n\nCall the news API from React<\/h2>\n\n\n\n
\/api<\/code> endpoint to render the dummy text, but we deleted the old API and added the new news APIs. As such, we need to change the code to call our APIs and show the latest news on the React app. We will change the App.js<\/code> in src<\/code> as follows:<\/p>\n\n\n\nimport React, { useState, useEffect } from 'react';\nimport logo from '.\/logo.svg';\nimport '.\/App.css';\n\nconst App = () => {\n const [stories, setStories] = useState([]);\n const [message, setMessage] = useState('loading...');\n useEffect(() => {\n async function fetchNewsStories () {\n try {\n await (await fetch('\/api\/fetch-news')).json();\n const data = await (await fetch('\/api\/news')).json();\n setStories(data)\n const message = data.length ? '' : 'No stories found';\n setMessage(message);\n } catch (err) {\n console.log(`err: ${err.message}`, err);\n setMessage('could not fetch stories');\n }\n }\n fetchNewsStories()\n }, []);\n\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n <h2>Latest News<\/h2>\n {message}\n <div className=\"stories\">\n {Array.isArray(stories) && stories.map(story => <h3><a href={story.url} target=\"_blank\" rel=\"noreferrer\">{story.headline}<\/a> - {story.source}<\/h3>)}\n <\/div>\n <\/header>\n <\/div>\n );\n}\n\nexport default App;<\/pre>\n\n\n\nfetchNewsStories<\/code> function inside the useEffect<\/code>. The first is to call the API to fetch the news and write it to the datastore.<\/p>\n\n\n\nstories<\/code>. The fetch news call is idempotent as it will add news that is not in the database with the unique key.<\/p>\n\n\n\nstories<\/code> array variable is later looped with a Map<\/code> and we show the headline and source as H3<\/code> with a link to the news story. We show a loading message while the stories are loading, and if there\u2019s an error, we show a could not fetch stories<\/code> message to the users.<\/p>\n\n\n\nbackground-color: #282c34;<\/code> on line 12 and color: white<\/code> on line 18 of App.css<\/code> to make the news more readable.<\/p>\n\n\n\nnpm start<\/code> to see something like the below:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\nhttp:\/\/localhost:3333\/api\/news<\/a><\/code> to see the get news API\u2019s JSON response. If it\u2019s empty, first hit the fetch news API at http:\/\/localhost:3333\/api\/fetch-news<\/a><\/code> to get the latest news from all three sources.<\/p>\n\n\n\ntape<\/a><\/code> so that the test step in the deployment passes. To do so, in the \/test<\/code> folder, we\u2019ll change lines 17\u201326 of the api-test.js<\/code> file to look like this:<\/p>\n\n\n\ntest('get \/api\/news', async t => {\n t.plan(1)\n try {\n let result = await tiny.get({url: `${base}\/api\/news`})\n t.ok(result, 'Got API response', result.body);\n } catch (err) {\n t.fail(err)\n }\n\n})<\/pre>\n\n\n\nDeploy the news app on Begin<\/h2>\n\n\n\n
![\"Merging](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/merging-deploying-pull-request.png\")
<\/figure><\/div>\n\n\n\n![\"Our](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/data-table-begin-data.png\")
<\/figure><\/div>\n\n\n\n0.0.1<\/code>, with a release note of 0.0.1 first release<\/code> \u2014 and click the Ship It!<\/strong> button:<\/p>\n\n\n\n![\"Indicating](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/indicating-release-version.png\")
<\/figure><\/div>\n\n\n\n![\"Building](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/build-deploy-processes-production.png\")
<\/figure><\/div>\n\n\n\n![\"Finished](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/05\/finished-app-production.png\")
<\/figure><\/div>\n\n\n\nNext steps<\/h2>\n\n\n\n
fetch news<\/code> API that runs every 6h and fills up our news table. That is one of the reasons I used a TTL of 6h.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n
Full visibility into production React apps<\/h2>\n\n\n\n