DEV Community

Cover image for Yet Another Newsletter LOL: Bing!
Nick Taylor
Nick Taylor

Posted on • Originally published at buttondown.email

Yet Another Newsletter LOL: Bing!

Another week, another newsletter. Let’s get to it!

Around the Web

  • Stackblitz has released the WebContainer API. There’s a bunch of use cases for this, for example integrated playgrounds in documentation. Also, of you’ve never checked out Stackblitz, it’s an awesome online IDE for full-stack web development.

Fun Stuff

This made me chuckle.

Words of Wisdom for the Week

My friend Vic drops some truth bombs here.

Shameless Plugs

My Remix work got merged! There is now a v. 1.0.0 of the @netlify/remix-edge-adapter

chore: release main #44

🤖 I have created a release beep boop

remix-edge-adapter: 1.0.0

1.0.0 (2023-02-13)

Features

  • implemented Remix server adapter and runtime for Netlify (#16) (9efc5cf)
remix-runtime: 1.0.0

1.0.0 (2023-02-13)

Features

  • implemented Remix server adapter and runtime for Netlify (#16) (9efc5cf)

This PR was generated with Release Please. See documentation.

I’m wrapping up the Remix template for Netlify and then it’ll all be ready for prime time. 🥳 If you’re interested, here’s the pull request.

feat: update to official Netlify Remix template #83

Description

Updates the template. The updated template uses remix.init to offer installing Remix for Netlify Functions or for Netlify Edge Functions. The Netlify Functions template existed already within Remix, but when I was working on https://github.com/remix-run/remix/pull/3104, we turned it into one template, extending the template via remix.init to choose between Netlify Functions and Netlify Edge Functions.

Ignore the deploy preview loading with a page not found. The template has changed and a deploy preview does not make sense at the moment. We'll need to rethink how we deploy the different templates as a deploy preview.

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

  1. Ensure the Netlify CLI is installed and up to date.

  2. Check out this branch, e.g. via the GitHub CLI, gh co 83

  3. There are four test scenarios:

    • Create a Remix app using TypeScript for Netlify Functions
    • Create a Remix app using JavaScript for Netlify Functions
    • Create a Remix app using TypeScript for Netlify Edge Functions
    • Create a Remix app using JavaScript for Netlify Edge Functions
  4. For each scenario, it always starts by running the following from the root folder in a shell.

npx create-remix --template ./
Enter fullscreen mode Exit fullscreen mode
  1. The CLI will prompt for a location for the project.
❯ npx create-remix --template ./
? Where would you like to create your app? (./my-remix-app)
Enter fullscreen mode Exit fullscreen mode

Ensure that the location is outside of the Netlify Remix template folder, e.g. ../my-remix-app

  1. The Remix CLI will prompt you to choose TypeScript or JavaScript. Choose accordingly for the given test scenarios mentioned above.
? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript 
  JavaScript
Enter fullscreen mode Exit fullscreen mode
  1. The Remix CLI will prompt you to install packages, press the ENTER to accept the default answer of Yes
? Do you want me to run `npm install`? (Y/n)
Enter fullscreen mode Exit fullscreen mode

The npm packages will install.

  1. The Remix CLI extended with our questions will prompt to create the app with Netlify Functions or Netlify Edge Functions.
💿 Running remix.init script
? Run your Remix site with: (Use arrow keys)
❯ Netlify Functions - Choose this for stable support for production sites 
  Netlify Edge Functions (beta) - Try this for improved performance on non-critical sites
Enter fullscreen mode Exit fullscreen mode

Choose accordingly for the given test scenarios mentioned above.

  1. Change to the the directory of the project you just created, e.g. ../my-remix-app
  2. Note that the newly created project should not contain a .github folder
  3. The README.md for the project should be for the given deployment target. If you created a new Remix app using the Netlify Functions template, it should have this README. Otherwise, it should be this README.
    1. The netlify.toml for the project should be for the given deployment target. If you created a new Remix app using the Netlify Functions template, it should have this netlify.toml. Otherwise, it should be this netlify.toml.
  4. Run npm install
  5. Run ntl build --offline
  6. Run ntl serve
  7. Navigate to https://localhost:8888 and the page loads.

image

Testing a deployment

If you want to test a deploy of your new Remix app created by the Remix template:

  1. Ensure you're logged in to Netlify via the CLI
ntl login
Enter fullscreen mode Exit fullscreen mode
  1. Create a new site:
ntl init
Enter fullscreen mode Exit fullscreen mode
  1. Deploy the site:
ntl deploy --build 
Enter fullscreen mode Exit fullscreen mode

or for production

ntl deploy --build --prod
Enter fullscreen mode Exit fullscreen mode

For us to review and ship your PR efficiently, please perform the following steps:

  • [x] Open a bug/issue before writing your code 🧑‍💻. This ensures we can discuss the changes and get feedback from everyone that should be involved. If you`re fixing a typo or something that`s on fire 🔥 (e.g. incident related), you can skip this step.
  • [x] Read the contribution guidelines 📖. This ensures your code follows our style guide and passes our tests.
  • [ ] Update or add tests (if any source code was changed or added) 🧪
  • [ ] Update or add documentation (if features were changed or added) 📝
  • [x] Make sure the status checks below are successful

A picture of a cute animal (not mandatory, but encouraged)

I had a great time hanging with Chris Demars last week. Check out the live stream recording on YouTube and don’t forget to give a subscribe. 😎

Jobs

I post jobs in the iamdeveloper.com community, plus all other kinds of content, as do others. If you’re looking for another friendly nook of the internet, head over to discord.iamdeveloper.com.

If you liked this newsletter, you can subscribe or if RSS is your jam, you can also subscribe via RSS.

Top comments (0)