{"id":24,"date":"2025-08-01T00:00:00","date_gmt":"2025-08-01T00:00:00","guid":{"rendered":"https:\/\/wordpress.securinsight.ca\/index.php\/2025\/08\/01\/workers-develop-locally-with-containers-and-the-cloudflare-vite-plugin\/"},"modified":"2025-08-01T00:00:00","modified_gmt":"2025-08-01T00:00:00","slug":"workers-develop-locally-with-containers-and-the-cloudflare-vite-plugin","status":"publish","type":"post","link":"https:\/\/wordpress.securinsight.ca\/index.php\/2025\/08\/01\/workers-develop-locally-with-containers-and-the-cloudflare-vite-plugin\/","title":{"rendered":"Workers &#8211; Develop locally with Containers and the Cloudflare Vite plugin"},"content":{"rendered":"<p>You can now configure and run <a href=\"https:\/\/developers.cloudflare.com\/containers\">Containers<\/a> alongside your <a href=\"https:\/\/developers.cloudflare.com\/workers\">Worker<\/a> during local development when using the <a href=\"https:\/\/developers.cloudflare.com\/workers\/vite-plugin\/\">Cloudflare Vite plugin<\/a>. Previously, you could only develop locally when using <a href=\"https:\/\/developers.cloudflare.com\/workers\/wrangler\/\">Wrangler<\/a> as your local development server.<\/p>\n<h4>Configuration<\/h4>\n<p>You can simply configure your Worker and your Container(s) in your Wrangler configuration file:<\/p>\n<ul>\n<li>\n<p>wrangler.jsonc<\/p>\n<div>\n<div>\n<figure>\n<pre data-language=\"jsonc\"><code class=\"language-jsonc\"><div><div><span>{<\/span><\/div><\/div><div><div><span>  <\/span><span>\"<\/span><span>name<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\"container-starter\"<\/span><span>,<\/span><\/div><\/div><div><div><span>  <\/span><span>\"<\/span><span>main<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\"src\/index.js\"<\/span><span>,<\/span><\/div><\/div><div><div><span>  <\/span><span>\"<\/span><span>containers<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>[<\/span><\/div><\/div><div><div><span>    <\/span><span>{<\/span><\/div><\/div><div><div><span>      <\/span><span>\"<\/span><span>class_name<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\"MyContainer\"<\/span><span>,<\/span><\/div><\/div><div><div><span>      <\/span><span>\"<\/span><span>image<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\".\/Dockerfile\"<\/span><span>,<\/span><\/div><\/div><div><div><span>      <\/span><span>\"<\/span><span>instances<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>5<\/span><\/div><\/div><div><div><span>    <\/span><span>}<\/span><\/div><\/div><div><div><span>  <\/span><span>],<\/span><\/div><\/div><div><div><span>  <\/span><span>\"<\/span><span>durable_objects<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>{<\/span><\/div><\/div><div><div><span>    <\/span><span>\"<\/span><span>bindings<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>[<\/span><\/div><\/div><div><div><span>      <\/span><span>{<\/span><\/div><\/div><div><div><span>        <\/span><span>\"<\/span><span>class_name<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\"MyContainer\"<\/span><span>,<\/span><\/div><\/div><div><div><span>        <\/span><span>\"<\/span><span>name<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\"MY_CONTAINER\"<\/span><\/div><\/div><div><div><span>      <\/span><span>}<\/span><\/div><\/div><div><div><span>    <\/span><span>]<\/span><\/div><\/div><div><div><span>  <\/span><span>},<\/span><\/div><\/div><div><div><span>  <\/span><span>\"<\/span><span>migrations<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>[<\/span><\/div><\/div><div><div><span>    <\/span><span>{<\/span><\/div><\/div><div><div><span>      <\/span><span>\"<\/span><span>new_sqlite_classes<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>[<\/span><\/div><\/div><div><div><span>        <\/span><span>\"MyContainer\"<\/span><\/div><\/div><div><div><span>      <\/span><span>],<\/span><\/div><\/div><div><div><span>      <\/span><span>\"<\/span><span>tag<\/span><span>\"<\/span><span>:<\/span><span> <\/span><span>\"v1\"<\/span><\/div><\/div><div><div><span>    <\/span><span>}<\/span><\/div><\/div><div><div><span>  <\/span><span>],<\/span><\/div><\/div><div><div><span>}<\/span><\/div><\/div><\/code><\/pre>\n<div><\/div>\n<\/figure>\n<\/div><\/div>\n<\/li>\n<li>\n<p>wrangler.toml<\/p>\n<div>\n<div>\n<figure>\n<pre data-language=\"toml\"><code class=\"language-toml\"><div><div><span>name<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\"container-starter\"<\/span><\/div><\/div><div><div><span>main<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\"src\/index.js\"<\/span><\/div><\/div><div><div>\n<\/div><\/div><div><div><span>[[<\/span><span>containers<\/span><span>]]<\/span><\/div><\/div><div><div><span>class_name<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\"MyContainer\"<\/span><\/div><\/div><div><div><span>image<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\".\/Dockerfile\"<\/span><\/div><\/div><div><div><span>instances<\/span><span> <\/span><span>=<\/span><span> <\/span><span>5<\/span><\/div><\/div><div><div>\n<\/div><\/div><div><div><span>[[<\/span><span>durable_objects<\/span><span>.<\/span><span>bindings<\/span><span>]]<\/span><\/div><\/div><div><div><span>class_name<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\"MyContainer\"<\/span><\/div><\/div><div><div><span>name<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\"MY_CONTAINER\"<\/span><\/div><\/div><div><div>\n<\/div><\/div><div><div><span>[[<\/span><span>migrations<\/span><span>]]<\/span><\/div><\/div><div><div><span>new_sqlite_classes<\/span><span> <\/span><span>=<\/span><span> <\/span><span>[<\/span><span> <\/span><span>\"MyContainer\"<\/span><span> <\/span><span>]<\/span><\/div><\/div><div><div><span>tag<\/span><span> <\/span><span>=<\/span><span> <\/span><span>\"v1\"<\/span><\/div><\/div><\/code><\/pre>\n<div><\/div>\n<\/figure>\n<\/div><\/div>\n<\/li>\n<\/ul>\n<h4>Worker Code<\/h4>\n<p>Once your Worker and Containers are configured, you can access the Container instances from your Worker code:<\/p>\n<div>\n<figure>\n<pre data-language=\"ts\"><code class=\"language-ts\"><div><div><span>import <\/span><span>{<\/span><span><span> <\/span><span>Container<\/span><\/span><span>,<\/span><span><span> <\/span><span>getContainer<\/span><span> <\/span><\/span><span>}<\/span><span> from <\/span><span>\"@cloudflare\/containers\"<\/span><span>;<\/span><\/div><\/div><div><div>\n<\/div><\/div><div><div><span>export<\/span><span> <\/span><span>class<\/span><span> <\/span><span>MyContainer<\/span><span> <\/span><span>extends<\/span><span> <\/span><span>Container<\/span><span> <\/span><span>{<\/span><\/div><\/div><div><div><span><span>  <\/span><\/span><span>defaultPort <\/span><span>=<\/span><span> <\/span><span>4000<\/span><span>;<\/span><span> <\/span><span>\/\/ Port the container is listening on<\/span><\/div><\/div><div><div><span><span>  <\/span><\/span><span>sleepAfter <\/span><span>=<\/span><span> <\/span><span>\"10m\"<\/span><span>;<\/span><span> <\/span><span>\/\/ Stop the instance if requests not sent for 10 minutes<\/span><\/div><\/div><div><div><span>}<\/span><\/div><\/div><div><div>\n<\/div><\/div><div><div><span>async<\/span><span> <\/span><span>fetch<\/span><span>(<\/span><span>request<\/span><span>,<\/span><span> <\/span><span>env<\/span><span>) <\/span><span>{<\/span><\/div><\/div><div><div><span>  <\/span><span>const<\/span><span> <\/span><span>{<\/span><span> <\/span><span>\"session-id\"<\/span><span>:<\/span><span> <\/span><span>sessionId<\/span><span> <\/span><span>}<\/span><span> <\/span><span>=<\/span><span> <\/span><span>await<\/span><span> <\/span><span>request<\/span><span>.<\/span><span>json<\/span><span>()<\/span><span>;<\/span><\/div><\/div><div><div><span>  <\/span><span>\/\/ Get the container instance for the given session ID<\/span><\/div><\/div><div><div><span>  <\/span><span>const<\/span><span> <\/span><span>containerInstance<\/span><span> <\/span><span>=<\/span><span> <\/span><span>getContainer<\/span><span>(<\/span><span>env<\/span><span>.<\/span><span>MY_CONTAINER<\/span><span>,<\/span><span> <\/span><span>sessionId<\/span><span>)<\/span><\/div><\/div><div><div><span>  <\/span><span>\/\/ Pass the request to the container instance on its default port<\/span><\/div><\/div><div><div><span>  <\/span><span>return<\/span><span> <\/span><span>containerInstance<\/span><span>.<\/span><span>fetch<\/span><span>(<\/span><span>request<\/span><span>)<\/span><span>;<\/span><\/div><\/div><div><div><span>}<\/span><\/div><\/div><\/code><\/pre>\n<div><\/div>\n<\/figure>\n<\/div>\n<h4>Local development<\/h4>\n<p>To develop your Worker locally, start a local dev server by running<\/p>\n<div>\n<figure>\n<pre data-language=\"sh\"><code class=\"language-sh\"><div><div><span>vite<\/span><span> <\/span><span>dev<\/span><\/div><\/div><\/code><\/pre>\n<div><\/div>\n<\/figure>\n<\/div>\n<p>in your terminal.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/developers.cloudflare.com\/_astro\/worker-with-containers-in-vite.CVBS93Fb_EFi6.webp\" alt=\"Local Dev video\" \/><\/p>\n<h4>Resources<\/h4>\n<p>Learn more about <a href=\"https:\/\/developers.cloudflare.com\/containers\/\" target=\"_blank\">Cloudflare Containers<\/a> or the <a href=\"https:\/\/developers.cloudflare.com\/workers\/vite-plugin\/\" target=\"_blank\">Cloudflare Vite plugin<\/a> in our developer docs.<\/p>","protected":false},"excerpt":{"rendered":"<p>You can now configure and run Containers alongside your Worker during local development when using the Cloudflare Vite plugin. Previously, you could only develop locally when using Wrangler as your local development server. Configuration You can simply configure your Worker and your Container(s) in your Wrangler configuration file: wrangler.jsonc { &#8220;name&#8221;: &#8220;container-starter&#8221;, &#8220;main&#8221;: &#8220;src\/index.js&#8221;, &#8220;containers&#8221;: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}