In addition to client side scripts, you also have the ability to write and run what seems like backend code. Go crazy with all the styling and scripting you want - it will work as you expect!īut wait, there's more! Electron works with Node.js under the hood. On reload, you'll see your changes appear in the app. Run npm start to launch the app locally, then make any change you want to the included index.html file. To get started, clone this repo to your machine: You even have the same Dev Tools available to you! You'll feel right at home as a front end developer. Think Google Chrome but without all the personalized user browser features and extra stuff. Your application will launch in its own private version of Chromium. (More details on building later in the post!) You cd into your Electron project, run the npm start command to launch a local instance of your work, then eventually run a build command to compile native production versions of your application. Me to you, developer to developer, working with Electron feels just like running any other development Terminal process on your machine. It takes care of the hard parts so you can focus on the core of your application." Some popular examples of Electron apps, according to Electron's website, are Slack, VS Code, Skype, and Discord. A Mega Simple Introduction to Electronįrom their website: "Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. I just wanted to call out that the thoughts here are valid for any kind of project where the final output is static files. The content of this post has no dependency on Create React App. I move the contents of that directory to my server and kaboom □ - my project is live on the web. When building for production, CRA generates a fresh build directory. I develop using CRA's npm start and cut my production builds using npm build. To be a little more specific, my specific project uses Create React App out of the box - no ejecting or fancy customization. The static nature of my project keeps it nice and portable. Any content specific to a particular user is fetched through AJAX calls. There's no backend server to bake data from a database into the page. Here is my situation: I have created something in all HTML, CSS, and JavaScript. If you already knew all this stuff - I hope you take action to make something and tell us about it! Starting with a static site I hope you leave this post with some newly sparked empowerment knowing that your front end skills can be used in places beyond web browsers. The idea here is to compile your browser centered code into a native application for whatever purposes you need. This could be replaced with whatever platform you want to target. We're going to go through a brief introduction to Electron, workflow with bringing a static site over to an Electron environment, and some random gotchas I found along the way.īefore we get started, I'm going to be saying "Steam" a lot. The app can then be distributed on a platform of your choice, such as Steam, using the Electron framework. This post is a quick tour of my process for bundling up an HTML project as a standalone app for both Windows and Mac. Web devs can absolutely publish games to Steam. (Thanks to Shawn for posting the original thread!) This particular question came up on Reddit's r/reactjs: Watch the trailer to get a feel for the game!
0 Comments
Leave a Reply. |