[{"data":1,"prerenderedAt":887},["ShallowReactive",2],{"\u002Fblog\u002Fhow-to-create-and-publish-npm-packages":3,"related-\u002Fblog\u002Fhow-to-create-and-publish-npm-packages":846},{"id":4,"title":5,"author":6,"body":10,"categories":826,"cta":829,"date":830,"description":16,"excerpt":829,"extension":831,"image":832,"imageAlt":833,"meta":834,"navigation":835,"path":836,"readingTime":837,"seo":838,"stem":840,"tags":841,"__hash__":845},"blog\u002Fblog\u002Fhow-to-create-and-publish-npm-packages.md","How to create and publish NPM Packages",{"name":7,"avatar":8,"description":9},"Perlat Kociaj","\u002Fimages\u002Fperlat.jpeg","Full Stack Web Developer",{"type":11,"value":12,"toc":801},"minimark",[13,17,22,45,48,71,116,120,123,134,137,140,171,175,180,183,188,196,203,206,210,218,221,224,235,238,245,248,254,259,262,272,276,295,299,306,311,314,321,333,338,342,349,356,362,369,372,377,381,384,390,400,403,409,416,419,438,441,444,450,465,469,476,479,499,505,515,530,537,547,558,561,565,568,571,578,585,590,594,597,603,607,615,624,630,636,644,650,653,656,662,665,668,671,677,680,687,691,695,698,705,712,719,723,739,742,745,749,752,779,782,785,788,791,794],[14,15,16],"p",{},"The aim of this article is to learn what is npm what do we need to run\u002Finstall npm packages and we will learn how we can create and publish a package to the npm registry and feel like a cool and badass developer 😎.",[18,19,21],"h2",{"id":20},"table-of-contents","Table of Contents",[23,24,25,33,39],"ul",{},[26,27,28],"li",{},[29,30,32],"a",{"href":31},"#what-is","What is NPM",[26,34,35],{},[29,36,38],{"href":37},"#requirements","Requirements",[26,40,41],{},[29,42,44],{"href":43},"#our-package","Our NPM Package",[18,46,32],{"id":47},"what-is-npm",[14,49,50,51,55,56,59,60,63,64,70],{},"What is npm again ? Well, NPM stands for ",[52,53,54],"strong",{},"N","ode ",[52,57,58],{},"P","ackage ",[52,61,62],{},"M","anager and as the authors define it on their ",[29,65,69],{"href":66,"rel":67},"https:\u002F\u002Fwww.npmjs.com\u002Fabout",[68],"nofollow","website"," :",[23,72,73,88,113],{},[26,74,75,76,81,82,87],{},"npm is the package manager for ",[29,77,80],{"href":78,"rel":79},"http:\u002F\u002Fnodejs.org\u002F",[68],"Node.js",". It was created in 2009 as an ",[29,83,86],{"href":84,"rel":85},"https:\u002F\u002Fgithub.com\u002Fnpm\u002Fnpm",[68],"open source project ","to help JavaScript developers easily share packaged modules of code.",[26,89,90,91,96,97,96,102,96,107,112],{},"The npm Registry is a public collection of packages of open-source code for Node.js, ",[29,92,95],{"href":93,"rel":94},"http:\u002F\u002Fwww.ember-cli.com\u002F",[68],"front-end web apps",", ",[29,98,101],{"href":99,"rel":100},"http:\u002F\u002Fcordova.apache.org\u002F",[68],"mobile apps",[29,103,106],{"href":104,"rel":105},"https:\u002F\u002Ftessel.io\u002F",[68],"robots",[29,108,111],{"href":109,"rel":110},"https:\u002F\u002Flinerate.f5.com\u002F",[68],"routers",", and countless other needs of the JavaScript community.",[26,114,115],{},"npm is the command line client that allows developers to install and publish those packages.",[18,117,119],{"id":118},"our-package","Our Package",[14,121,122],{},"For the scope of this article, we will get step by step of the process of creating an npm package and publish it on the npm registry so other developers around the world can use our package.",[14,124,125,126,129,130,133],{},"The package we are going to create is a simple CLI app that will accept an email as an argument and will check if that email has been found in public data breaches. To achieve this we will be making ",[52,127,128],{},"HTTP"," requests to an external API, the haveibeenpawned.com website’s API. The name of our package? ",[52,131,132],{},"pawnhub"," 🙄 😉",[18,135,38],{"id":136},"requirements",[14,138,139],{},"To build our package we need the following",[23,141,142,145,160,168],{},[26,143,144],{},"A working Computer 💻 🤓 i will be using MacOS but the process is similar to all OS.",[26,146,147,148,153,154,159],{},"A Code Editor 📜 (I use ",[29,149,152],{"href":150,"rel":151},"https:\u002F\u002Fcode.visualstudio.com\u002F",[68],"Visual Studio Code ","or ",[29,155,158],{"href":156,"rel":157},"https:\u002F\u002Fwww.jetbrains.com\u002Fwebstorm\u002F",[68],"WebStorm",")",[26,161,162,167],{},[29,163,166],{"href":164,"rel":165},"https:\u002F\u002Fnodejs.org\u002F",[68],"NodeJS"," installed our system with NPM installed and",[26,169,170],{},"Internet Connection",[18,172,174],{"id":173},"getting-started","Getting Started",[176,177,179],"h3",{"id":178},"install-nodejs","Install NodeJS",[14,181,182],{},"To install NodeJS on our system we can do it in many ways, i will demonstrate 2 of them.",[184,185,187],"h4",{"id":186},"install-from-official-website","Install from official website",[14,189,190,191,195],{},"Visit the official NodeJs website ",[29,192,194],{"href":164,"rel":193},[68],"https:\u002F\u002Fnodejs.org",", press the download button",[14,197,198],{},[199,200],"img",{"alt":201,"src":202},"nodejs","\u002Fimages\u002Fblog\u002Fnodejsinstall.png",[14,204,205],{},"When the download is finished, open the file and follow the instructions to complete the installation. Doing so will install node and npm.",[184,207,209],{"id":208},"install-using-homebrew","Install using homebrew",[14,211,212,217],{},[29,213,216],{"href":214,"rel":215},"https:\u002F\u002Fbrew.sh\u002F",[68],"Homebrew"," is a package manager for MacOS or Linux.",[14,219,220],{},"First, we need to install Homebrew (if not already installed).",[14,222,223],{},"Open the terminal and run the following command:",[225,226,231],"pre",{"className":227,"code":229,"language":230},[228],"language-text","\u002Fusr\u002Fbin\u002Fruby -e \"$(curl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002FHomebrew\u002Finstall\u002Fmaster\u002Finstall)\"\n","text",[232,233,229],"code",{"__ignoreMap":234},"",[14,236,237],{},"This will download and install Homebrew for us.",[14,239,240,241,244],{},"Then run ",[232,242,243],{},"brew update"," to make sure Homebrew is up to date.",[14,246,247],{},"To install Node we just simply run the below command:",[225,249,252],{"className":250,"code":251,"language":230},[228],"brew install node\n",[232,253,251],{"__ignoreMap":234},[14,255,256],{},[199,257],{"alt":201,"src":258},"\u002Fimages\u002Fblog\u002Fnodeinstalled.png",[14,260,261],{},"To confirm we have installed Node and NPM on our system, we can run the following commands:",[14,263,264,267,268,271],{},[232,265,266],{},"node -v"," and ",[232,269,270],{},"npm -v"," it will display the version we have just installed .",[18,273,275],{"id":274},"creating-the-package","Creating the Package",[14,277,278,279,282,283,286,287,290,291,294],{},"First, we need to create a directory for our project. I like to have all my projects in the ",[232,280,281],{},"~\u002Fprojects"," directory 🗂. Open the terminal and run ",[232,284,285],{},"mkdir pawnhub"," this will create a folder named ",[288,289,132],"em",{},", then enter the directory ",[232,292,293],{},"cd pawnhub",".",[176,296,298],{"id":297},"npm-init","NPM Init",[14,300,301,302,305],{},"Now that we are inside our project directory, we need to initialize an npm project. We can do that by running ",[232,303,304],{},"npm init",". This will start the interactive clip and ask us some information about our new package, such as the name, version, description, author, and license.",[14,307,308],{},[199,309],{"alt":201,"src":310},"\u002Fimages\u002Fblog\u002Fnpminit.png",[14,312,313],{},"When we fill all the info we will be asked to confirm the information we have just entered.",[14,315,316,317,320],{},"Next, we need to open the project in our code editor. With Visual Studio Code we can run the command ",[232,318,319],{},"code ."," which will open the current directory or we can open the Visual Studio Code and press COMMAND+O and open the dir.",[14,322,323,324,327,328],{},"You will find that we have only 1 file the ",[232,325,326],{},"package.json",". More about the package.json file ",[29,329,332],{"href":330,"rel":331},"https:\u002F\u002Fdocs.npmjs.com\u002Ffiles\u002Fpackage.json",[68],"here!",[14,334,335],{},[199,336],{"alt":201,"src":337},"\u002Fimages\u002Fblog\u002Fnpmconfirm.png",[176,339,341],{"id":340},"main-file","Main File",[14,343,344,345,348],{},"Our next step is to create the main file we are going to use, the ",[232,346,347],{},"index.js"," file.",[14,350,351,352,355],{},"create the file in our root dir ",[232,353,354],{},"touch index.js",". Open the file and copy-paste the following :",[225,357,360],{"className":358,"code":359,"language":230},[228],"let message = 'Hello World!';console.log(message)\n",[232,361,359],{"__ignoreMap":234},[14,363,364,365,368],{},"Running the file is pretty straightforward. Open the terminal and run ",[232,366,367],{},"node index.js"," this will tell Node to run the index.js file. We should see the following on our terminal.",[14,370,371],{},"Cool huh? But, it is not dynamic. we cannot change the outputted message! We will learn how to do so in the next section using arguments.",[14,373,374],{},[199,375],{"alt":201,"src":376},"\u002Fimages\u002Fblog\u002Fopendir.png",[176,378,380],{"id":379},"node-arguments","Node Arguments",[14,382,383],{},"Normally, when we want to pass arguments we do the following:",[14,385,386,389],{},[232,387,388],{},"node filename argument1 argument2 argumentN...."," But the question is, how can you access these arguments ?",[14,391,392,393,396,397,399],{},"The simplest way of retrieving arguments in Node.js is via the ",[232,394,395],{},"process.argv"," array. This is a global object that we can use without importing any additional libraries to use it. These arguments can be accessed within the application via the ",[232,398,395],{}," array. Let us start using arguments!",[14,401,402],{},"Modify the file to the following:",[225,404,407],{"className":405,"code":406,"language":230},[228],"let message = 'Hello World!';console.log(process.argv)\n",[232,408,406],{"__ignoreMap":234},[14,410,411,412,415],{},"and run ",[232,413,414],{},"node index.js argument"," we will have something like the following image.",[14,417,418],{},"You will have noticed that we have an array with 3 string items. I marked them with 0,1 and 2.",[14,420,421,422,425,426,429,430,433,434,437],{},"The argument with key",[232,423,424],{},"0"," is the ",[232,427,428],{},"node"," itself, argument ",[232,431,432],{},"1"," is the file being executed and the last (",[232,435,436],{},"2",") argument is the argument that we will be using in this tutorial.",[14,439,440],{},"Ok, so now we need to do something with the last argument. Let’s display a customized message on the console.",[14,442,443],{},"change the code to the following:",[225,445,448],{"className":446,"code":447,"language":230},[228],"let name = process.argv[2];let message = `Hello ${name}`;console.log(process.argv)\n",[232,449,447],{"__ignoreMap":234},[14,451,452,453,456,457,460,461,464],{},"What we did here is we initialize a variable called ",[232,454,455],{},"name"," have a value from the third (key 2 as we start counting from 0 ) argument of the current process. Let’s run ",[232,458,459],{},"node index.js Perlat"," (",[52,462,463],{},"Perlat"," is my name, so you can change this accordingly)",[176,466,468],{"id":467},"make-it-executable","Make it Executable",[14,470,471,472,475],{},"So far so good, we have created our simple app, and we can run it by running ",[232,473,474],{},"node index.js name"," but we need to be inside the directory for this to work. and we need to run every time the node and then the file, and then add an argument.",[14,477,478],{},"How can we create an executable that will allow us to run the command from whatever directory?",[14,480,481,482,484,485,488,489,494,495,498],{},"The answer is node binaries! And we can easily do this by adding a new field in the ",[232,483,326],{}," file, the ",[232,486,487],{},"bin"," field. More info about the bin field ",[29,490,493],{"href":491,"rel":492},"https:\u002F\u002Fdocs.npmjs.com\u002Ffiles\u002Fpackage.json#bin",[68],"here",". Now, add this inside your package.json, I usually add this just after the ",[232,496,497],{},"main"," field.",[225,500,503],{"className":501,"code":502,"language":230},[228],"\"bin\":{  \"pawnhub\":\".\u002Findex.js\"},\n",[232,504,502],{"__ignoreMap":234},[14,506,507,508,510,511,514],{},"By doing so, we say to node that we want to register a command named ",[232,509,132],{}," that will execute the ",[232,512,513],{},".\u002Findex.js"," file upon running it. We can add multiple executables inside the bin file by specifying the name and the file to execute.",[14,516,517,518,521,522,525,526,529],{},"If you are impatient and already ran the command ",[232,519,520],{},"pawnhub name"," you will get an error ",[232,523,524],{},"command not found: pawnhub"," this is because the command is not linked. We can do this by running ",[232,527,528],{},"npm link"," inside our directory, and voila! our package is available symlinked globally on our system! Go ahead an try it. It will fail!",[14,531,532,533,536],{},"Reason is because we need to add ",[232,534,535],{},"#!\u002Fusr\u002Fbin\u002Fenv node"," at the very top of the index.js file.",[14,538,539,540,543,544,546],{},"By adding it , we are telling *nix systems that the interpreter of our JavaScript file should be ",[232,541,542],{},"\u002Fusr\u002Fbin\u002Fenv node"," which looks up for the locally-installed ",[232,545,428],{},"executable.",[14,548,549,550,553,554,557],{},"In Windows, that line will just be ignored because it will be interpreted as a comment, but ",[52,551,552],{},"it has to be there"," because ",[232,555,556],{},"npm"," will read it on a Windows machine when the NodeJS command-line package is being installed. Now try again and it should be working fine!",[14,559,560],{},"Now we have a package that is acceptin arguments and can be accessed globally. We need to start working on our final package, making the http requests to haveibeenpawned.com website.",[176,562,564],{"id":563},"install-axios","Install Axios",[14,566,567],{},"What is Axios?",[14,569,570],{},"Axios is a promise based HTTP client for the browser and node.js. We can make requests such as GET, POST, DELETE or PUT. we are going to use only the GET request.",[14,572,573,574,294],{},"More information about axios ",[29,575,493],{"href":576,"rel":577},"https:\u002F\u002Fgithub.com\u002Faxios\u002Faxios",[68],[14,579,580,581,584],{},"Because Axios is an npm package we can install it by running ",[232,582,583],{},"npm install axios"," and it will be installed on our project. Axios can be used in browser applications as well by using a CDN or the path to the file like:",[225,586,588],{"className":587,"code":234,"language":230},[228],[232,589,234],{"__ignoreMap":234},[176,591,593],{"id":592},"using-axios","Using Axios",[14,595,596],{},"This is a simple GET request using axios! (modified from the example on the official docs)",[225,598,601],{"className":599,"code":600,"language":230},[228],"const axios = require('axios');​\u002F\u002F Make a request for a user with a given IDaxios.get('ENDPOINT')  .then(function (response) {    \u002F\u002F handle the response when it is a success    console.log(response);  })  .catch(function (error) {    \u002F\u002F handle when error ocurrs (eg: 404)    console.log(error);  })\n",[232,602,600],{"__ignoreMap":234},[18,604,606],{"id":605},"using-haveibeenpawnedcom-api","Using Haveibeenpawned.com API",[14,608,609,610,614],{},"Go ahead and try the ",[29,611,612],{"href":612,"rel":613},"https:\u002F\u002Fhaveibeenpwned.com",[68]," website (HIBP for abbreviation) and check if you have an account that has been compromised in a data breach. We will be using their API to achieve the functionality we desire.",[14,616,617,618,623],{},"The ",[29,619,622],{"href":620,"rel":621},"https:\u002F\u002Fhaveibeenpwned.com\u002FAPI\u002Fv2",[68],"docs"," for using the API, for a reference.",[14,625,626,627,629],{},"Ok, now let’s make a request to HIBP API. Modify the ",[232,628,347],{}," to reflect the bellow code",[225,631,634],{"className":632,"code":633,"language":230},[228],"#!\u002Fusr\u002Fbin\u002Fenv node\n\nconst axios = require('axios');\n\naxios.get(`https:\u002F\u002Fhaveibeenpwned.com\u002Fapi\u002Fv2\u002Fbreachedaccount\u002Fadmin@test.com`)\n.then(response=>{\n     console.log(response.data)\n})\n.catch(err=>{\n    console.log(err)\n})\n",[232,635,633],{"__ignoreMap":234},[14,637,638,639,643],{},"We are calling the API to search the breachedaccount for ",[29,640,642],{"href":641},"mailto:admin@test.com","admin@test.com"," email.",[14,645,646,647,649],{},"Now run ",[232,648,132],{}," and you should get a big JSON object like the following sample.",[14,651,652],{},"But we don’t need every information from that JSON object…",[14,654,655],{},"Lets edit the file to reflect the following:",[225,657,660],{"className":658,"code":659,"language":230},[228],"#!\u002Fusr\u002Fbin\u002Fenv node\n\nconst axios = require('axios');\n\naxios.get(`https:\u002F\u002Fhaveibeenpwned.com\u002Fapi\u002Fv2\u002Fbreachedaccount\u002Fadmin@test.com`)\n.then(response=>{\nlet breaches=[]; \u002F\u002Fcreate empty array \n    console.log(`admin@test.com was found in ${ response.data.length} breaches!`) \n    \u002F\u002Fiterate each breaches to get only specific attributes\n    response.data.forEach(breach => {\n        breaches.push({\n            Name:breach.Name,\n            Domain:breach.Domain,\n            BreachDate:breach.BreachDate,\n            AccountsHacked:breach.PwnCount,\n        })\n    });\n    console.table(breaches) \u002F\u002Fdisplay in pretty table! :D \n})\n.catch(err=>{\n    console.log(err)\u002F\u002Fdisplay error\n})\n",[232,661,659],{"__ignoreMap":234},[14,663,664],{},"Now we should have a better representation of the data we got it should similar to the following:",[14,666,667],{},"Great, but this is not dynamic, we have hardcoded the email… How can we change this? Of course by using arguments!",[14,669,670],{},"Lets modify the code to the following:",[225,672,675],{"className":673,"code":674,"language":230},[228],"#!\u002Fusr\u002Fbin\u002Fenv node\n\nconst axios = require('axios');\nconst email = process.argv[2] || 'admin@test.com'; \u002F\u002Fget the email from the arguments or set a default value\naxios.get(`https:\u002F\u002Fhaveibeenpwned.com\u002Fapi\u002Fv2\u002Fbreachedaccount\u002F${email}`)\n.then(response=>{\nlet breaches=[]; \u002F\u002Fcreate empty array \n    console.log(`${email} was found in ${ response.data.length} breaches!`) \n    \u002F\u002Fiterate each breaches to get only specific attributes\n    response.data.forEach(breach => {\n        breaches.push({\n            Name:breach.Name,\n            Domain:breach.Domain,\n            BreachDate:breach.BreachDate,\n            AccountsHacked:breach.PwnCount,\n        })\n    });\n    console.table(breaches) \u002F\u002Fdisplay in pretty table! :D \n})\n.catch(err=>{\n    console.log(err)\u002F\u002Fdisplay error\n})\n",[232,676,674],{"__ignoreMap":234},[14,678,679],{},"We did it!",[14,681,682,683,686],{},"We can now query the API for any email we want by running ",[232,684,685],{},"pawnhub THE_EMAIL@DOMAIN.TLD"," and check if that email has been compromised! So now what? Well, now we need to do our final step, publish the package on the NPM registry!",[18,688,690],{"id":689},"publish-the-package","Publish the Package",[176,692,694],{"id":693},"authenticate","Authenticate",[14,696,697],{},"Well, for obvious reasons you need to create an account to be able to publish to the NPM registry!",[14,699,700,701,294],{},"To create an account in the NPM registry click ",[29,702,493],{"href":703,"rel":704},"https:\u002F\u002Fwww.npmjs.com\u002Fsignup",[68],[14,706,707,708,711],{},"After creating an account, you need to authenticate our self by running the command ",[232,709,710],{},"npm login",", you would be prompted to provide our details, you need to enter the required details and you should log in!",[14,713,714,715,718],{},"To test that the login was successful, enter the command ",[232,716,717],{},"npm whoami",", your username should be displayed to the CLI.",[176,720,722],{"id":721},"publish","Publish",[14,724,725,726,729,730,733,734,738],{},"Now the final step for our package to be available for the global community! Open the terminal and run the following inside the project directory ",[232,727,728],{},"npm publish --access public"," this will publish the package with public access. and will be available on the npm registry. for this example, I have chosen the name to be ",[232,731,732],{},"@perlatsp\u002Fpawnhub"," and is now available ",[29,735,493],{"href":736,"rel":737},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@perlatsp\u002Fpawnhub",[68],". Make sure that you change the name inside the package.json file!",[14,740,741],{},"Boom!💥 Mission accomplished! ✅",[14,743,744],{},"We have just learned how to create and publish an NPM package to the NPM registry. The next step is to improve our package by adding more features or fixing any bugs… 🐞",[176,746,748],{"id":747},"test-the-package","Test the Package",[14,750,751],{},"Ok, we have published our package..how can we be sure that everything went as intended?",[14,753,754,755,758,759,763,764,767,768,771,772,774,775,778],{},"Now on your terminal run ",[232,756,757],{},"npm unlink"," to remove the symlink we have created on ",[29,760,762],{"href":761},"#header-n610","this step"," and install our brand new package by running ",[232,765,766],{},"npm install -g YOURPACKAGENAME"," I am using ",[232,769,770],{},"npm install -g @perlatsp\u002Fpawnhub",". We just installed our package and is globally available via ",[232,773,132],{}," (remember this is the package name that I set, yours should be different. Test it by running ",[232,776,777],{},"pawnhub any@email.com"," and check the results. For the purpose of this tutorial, we have not done anything for error handling, so in case the email is not valid or does not exist in any databreakch you might get non handled errors.",[14,780,781],{},"Now we have just finished this tutorial.",[14,783,784],{},"Go and make some create tools and packages! 🙆‍♂️",[14,786,787],{},"Let me know if you have any questions! ❓",[14,789,790],{},"If you have followed this tutorial please do comment below the awesome tools you have created!",[792,793],"hr",{},[14,795,796,797,294],{},"Need a custom tool, CLI, or web application built? Check out my ",[29,798,800],{"href":799},"\u002Fservices\u002Fweb-development","web development services",{"title":234,"searchDepth":802,"depth":802,"links":803},2,[804,805,806,807,808,812,820,821],{"id":20,"depth":802,"text":21},{"id":47,"depth":802,"text":32},{"id":118,"depth":802,"text":119},{"id":136,"depth":802,"text":38},{"id":173,"depth":802,"text":174,"children":809},[810],{"id":178,"depth":811,"text":179},3,{"id":274,"depth":802,"text":275,"children":813},[814,815,816,817,818,819],{"id":297,"depth":811,"text":298},{"id":340,"depth":811,"text":341},{"id":379,"depth":811,"text":380},{"id":467,"depth":811,"text":468},{"id":563,"depth":811,"text":564},{"id":592,"depth":811,"text":593},{"id":605,"depth":802,"text":606},{"id":689,"depth":802,"text":690,"children":822},[823,824,825],{"id":693,"depth":811,"text":694},{"id":721,"depth":811,"text":722},{"id":747,"depth":811,"text":748},[827,828],"Article","Project",null,"2019-06-19","md","\u002Fimages\u002Fblog\u002FCreate-an-dpublish-npm-packages.png","How to create and publish NPM packages",{},true,"\u002Fblog\u002Fhow-to-create-and-publish-npm-packages",11,{"title":5,"description":839,"ogImage":832},"Step-by-step guide to creating, testing, and publishing your own NPM package to the registry using Node.js and JavaScript.","blog\u002Fhow-to-create-and-publish-npm-packages",[842,843,844,201,556],"axios","haveibeenpawned","javascript","_8j0owbHx2e0xXpEab62zifhDylEb47nK-9n9kcc6yI",[847,851,855,859,863,867,871,875,879,883],{"title":848,"path":849,"categories":850},"Do I Really Need HTTPS? What Happens If My Website Is Not Secure","\u002Fblog\u002Fdo-i-really-need-https",[827],{"title":852,"path":853,"categories":854},"How Much Should a Business Website Cost? What You Are Actually Paying For","\u002Fblog\u002Fhow-much-should-a-business-website-cost",[827],{"title":856,"path":857,"categories":858},"How Often Should I Update My Website? A Realistic Guide for Business Owners","\u002Fblog\u002Fhow-often-should-i-update-my-website",[827],{"title":860,"path":861,"categories":862},"What Is Website Hosting and Does It Really Matter? A Non-Technical Guide","\u002Fblog\u002Fwhat-is-website-hosting-and-does-it-matter",[827],{"title":864,"path":865,"categories":866},"Why Did My Website Get Hacked? Common Causes and What To Do Next","\u002Fblog\u002Fwhy-did-my-website-get-hacked",[827],{"title":868,"path":869,"categories":870},"Why Do Emails From My Website Go to Spam? What Business Owners Need to Check","\u002Fblog\u002Fwhy-do-emails-from-my-website-go-to-spam",[827],{"title":872,"path":873,"categories":874},"Why Does Google Not Show My Business Website? A Plain-English SEO Checklist","\u002Fblog\u002Fwhy-does-google-not-show-my-business-website",[827],{"title":876,"path":877,"categories":878},"Why Does My Contact Form Stop Working? Common Causes and Easy Fixes","\u002Fblog\u002Fwhy-does-my-contact-form-stop-working",[827],{"title":880,"path":881,"categories":882},"Why Does My Site Look Broken on Mobile? The Most Common Non-Technical Causes","\u002Fblog\u002Fwhy-does-my-site-look-broken-on-mobile",[827],{"title":884,"path":885,"categories":886},"Why Is My Website Slow? 7 Simple Things That Usually Cause It","\u002Fblog\u002Fwhy-is-my-website-slow-7-simple-things-that-usually-cause-it",[827],1777992044463]