![]() Then, we're telling app to listen for GET requests on the / path of our HTTP server (which, in this case, is our only path). ![]() First, we're importing the dependencies that we just installed and creating a new instance of express that we can access through app. Res.sendFile(path.join(_dirname + "/index.html")) įor anyone not familiar with what's going on in the above code, I'll do a quick rundown. Head on over to your index.js file and replace the contents of the file with the following JS: We're now ready to actually serve the app via express. They will also be present in your package.json file, since CodeSandbox automatically goes through the full install process for new dependencies. In the Dependencies section in the sidebar, you should now see both express and path. After that, bring up the dependency popup again, type path, and add the top result for it (3M+ downloads). In the search box, type express and click the top result for it (the one with 54.2M+ downloads). CodeSandbox makes this easy, and you can add new dependencies by clicking the Add dependency button in the primary project sidebar. Now, we need to install a few dependencies. Note: You can also use the Emmet Abbreviation ! or html:5 to create this snippet, and then add the section! To get started, create an index.html file in the src folder of your Node project. This section of the guide is based on scotch.io's article " Use Express to Deliver HTML Files". For this purpose, we'll be using Express to serve an index.html file. Using the built-in http library is great, but we want to quickly and easily serve a static HTML file so that we can focus on creating pages using Tailwind. Good job! You've now got your own Node instance running in CodeSandbox, and you're well on your way to getting to experiment with Tailwind. Note: You will have to sign in with your GitHub account in order to fork/make changes to the Node HTTP Server template! If you have not signed in at this point, please do so before proceeding with this guide. At this point, you should an environment similar (or hopefully identical) to this: Having access to the Terminal is necessary for building and processing our CSS through PostCSS, using Tailwind's Purge capabilities, and for doing any extension or customization of Tailwind (as this requires a Tailwind config file). This will spawn a Node project with a default package.json script that will watch index.js and refresh when it sees changes. ![]() Then, in the popup, search for or select Node HTTP Server:Ĭreating a sandbox based off the Node HTTP Server template is necessary for having access to the Terminal, which is present in CodeSandbox's Container Environments. To start on this journey, head on over to CodeSandbox, and click "Create Sandbox" in the top right. This guide will show you how to get up and running with TailwindCSS in CodeSandbox with a build process included, similar to my previous blog. ![]() The CDN approach works, but robs you of a lot of customization, which Tailwind details here. However, there is not currently a template for TailwindCSS, and no clear way to run Tailwind outside of using a link to the CDN. CodeSandbox is an awesome web-based editor and playground for developers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |