---title: Sending SMS from the Browserslug: /guides/send-sms-from-the-browser-using-node-jssidebar_position: 6x-custom: ported_from_readme: true---Overview--------This guide will use SignalWires Messaging API to create a simple web application that can send SMS through the browser.What do I need?---------------Find the full code on Github [here](https://github.com/signalwire/guides/tree/main/Messaging/Sending%20SMS%20from%20the%20Browser%20-%20NodeJS).You will need the [SignalWire Realtime SDK](/sdks/reference/realtime-sdk/00-realtime-sdk-reference.mdx) running on Node.js. Itll help if you are familiar with the Express framework.Additionally, you will need a SignalWire account which you can create [here](https://m.signalwire.com/signups/new?s=1). From your SignalWire Space, you need your SignalWire API credentials. If you need help finding these credentials, visit [Navigating your SignalWire Space](/guides/navigating-your-space).Trying it out-------------### Run NativelyNavigate to [this project](https://github.com/signalwire/guides/tree/main/Messaging/Sending%20SMS%20from%20the%20Browser%20-%20NodeJS) in the SignalWire Guides GitHub Repo, and follow the instructions in README.md.:::info This example should not be used in a live environmentExposing this web app to a live endpoint means anybody with the URL could send SMS requests through your SignalWire space.:::Code Walkthrough----------------The main code for this demo (index.js) is a very simple file server with a minimal backend with a single route (/sendSMS). The file server delivers index.html to the users browser.To perform API calls to the SignalWire servers, we need to send some authentication information: Project ID and the API token. This information is sensitive, so we take special precautions in storing them. We keep them in the .env file and add a rule on .gitignore to not push the .env file to GitHub. And while were at it, we also store the phone number in the .env file, for ease of maintenance.### Server-side code#### Set-upThe server-side code for this is very simple. First, we will import the required packages, set our environment variables, and create a client that will handle our SMS requests.javascriptrequire(dotenv).config();const { Messaging } = require(@signalwire/realtime-api);const sendingPhoneNumber = process.env.PHONE_NUMBER;const client = new Messaging.Client({ project: process.env.PROJECT_ID, token: process.env.API_TOKEN});#### Index RouteNext, we will write some code to serve the client-side code (index.html). When integrating this project, this may not be needed depending on how youre hosting the frontend.javascriptapp.use(/, express.static(html)); // serve the html folder#### Create SMS Handler RouteFinally, for our server-side, we will create a route that actually handles the creation of our SMS requests to the client. Well name it /sendSMS.First, we get the destination phone number and the SMS body from the client. We need to make sure that the values are legitimate. In particular, we need to make sure the phone number is in the required E.164 format. To do so, we call the isE164PhoneNumber() function provided by the is-e164-phone-number package on NPM. You can, of course, choose to validate the numbers however you like, including regular expressions. You might also want to verify that the destination country code is supported by you.We will try to send the message we retrieved from the client, and return a confirmation to the client. In this case, there is no validation if a message was delivered successfully, only that the request was created.Alternatively, if our conditions arent met, we just assume something went wrong and return an error message to the client.While the rest of the parameters to client.send (body, to, from) are self-explanatory, the context parameter needs an introduction. It is used to segregate calls and messages (so you can, for example, subscribe to events from a group of phone numbers in the same context). For further information, please read [First steps with Messaging](/guides/first-steps-with-messaging).javascriptapp.post(/sendSMS, async (req, res) => { let { phoneno, body } = req.body; if (typeof body !== string || body === ) return res.send(Invalid body); if (!isE164PhoneNumber(phoneno)) return res.send(Invalid Phone Number); console.log(Sending message to phone number, phoneno); try { const status = await client.send({ context: office, from: sendingPhoneNumber, // The number you bought from SignalWire to: phoneno, body, }); console.log(status); return res.send(Your SMS was sent); } catch (e) { console.error(e); return res.send(Error sending SMS); }});### Client-side CodeOur client-side code is just a simple HTML file index.html and its styling in index.css.Most of this code is just the default/boilerplate HTML. The heart of our client boils down to the .First, we will create a new
