I'm trying to start my first web project. My experience is with .NET desktop development and I'm very new to the Java/Kotlin world. Client side I want to use React and write the code in Kotlin, then transpile to JavaScript. Server side I would like to use Ktor both to serve the static content (React app + various assets) and REST endpoints for the SPA. I would like to use the Multiplatform feature to be able to share as much code as possible. My IDE is IntelliJ IDEA.
I would like to have auto-reload and be able to debug both React and server code for development and I would like to be able to create a single fat jar with the complete application (frontend+backend).
I started with the template that IntelliJ provides for multiplatform JS+JVM. I have been working on it for more than one day with little success and also haven't been able to find any sample online with all the features, and also haven't been able to combine various samples due to insufficient knowledge. Only thing I got is either running the application without autoreload or creating the jar file by adding "manifest" to the build.gradle file which breaks my run configuration.
I would very much appreciate if someone could provide or point me to an example with these features which I can use as an starting point for my application.
Here is a link to an example to get you started.
https://play.kotlinlang.org/hands-on/Full%20Stack%20Web%20App%20with%20Kotlin%20Multiplatform/01_Introduction
Related
Struggling with collision of technical terms (most especially the term "plugin" which has about seven different meanings within the react development stack).
Short question:
Is there a way to pre-compile static webpack modules that can be installed separately from a main static react web application, while still sharing modules contained in the main web application? (The question as best I can formulate it using my relatively naïve react developer skills). I'd like the ability to plug in web user interface components supplied by 3rd party developers after the fact. i.e. installable runtime React UI components, not requiring react compilation at install time.
Details:
I have a static React web app that allows remote control of audio plugins (specifically LV2 audio plugins). It's a single-page static react app (that communicates via we sockets with the running application), hosted by a static C++ web server. Realtime and IOT agility requirements make a python hosted dynamic web server an runtime compilation an unattractive prospect (https://github.com/rerdavies/pipedal)
What I want to do is allow extension of the web UI using separate bundles provided by 3rd-party LV2 plugins. The ideal solution would be to allow static webpack bundles pre-compiled by the lv2 plaigns and placed in /usr/lib/lv2/<pluginname.lvw>/resource directories to be consumed by the web app at runtime. I'm using a custom C++ web server, so redirecting URLs into the /usr/lib/lv2/xx/resource directories is straightforward.
The main app would be distributed one apt package. Lv2 plugins would be compiled (potentially by 3rd party developers) against an "sdk package" provided by the main app build, after the main app was built, and then distributed in separate packages. Ideally, I'd like to pre-compile the ui code for the plugins to static webpack modules before their installers are built.
I more-or-less understand how I would do this if I were using raw CLI tools and configuration files (tsc, webpack, babel). But I can't help thinking I would be reinventing a wheel. (And I do have concerns that I'm going to incur serious version-dependency problems).
I would like to code-share the base modules (react, #mui controls, and a limited set of app-supplied components and interfaces).
I see the path through the various tools to make this happen, using my own custom build script, I think. I can get the typescript compiler to do code-splitting; I can probably figure out how to get the babel transpiler to do the right thing. And I think I understand how to write webpack configuration files that will process do sharing of modules from the main app. And a likely path to build and distribute an npm package to do the setup and build of LV2 plugin projects. And how to write supporting CMake build rules for building and installing such packages. &c. But I'm concerned that I'm going to go down a large rabbit hole trying to reinvent something that surely must exist already. And I can imagine seven thousand ways for this to go horribly wrong. :-P
So far, I have implemented the TypeScript compiler portion of the build procedure. And writing various bits to dynamicall intercept and service resource requests in the web server is trivial. But it has become painfully obvious that I also need to do babel and webpack build steps as well.
I haven't yet looked at the react-scripts package contents to see if I can steal code to build what I want there. Perhaps that's a viable path.
Is there a way to do this with off-the-shelf npm packages and off-the-shelf npm build procedures? I can find all kinds of bits to get me part way; but the integration of all the bits is rather daunting. Should I just do the deed, and start writing my own custom build scripts to make this happen?
I'm just curios about this situations creating app with React Js. Is there any way to build directly on the hosting Cpanel not on localhost during development? I don't know if this question is right I'm new about this but how about if were done developing on local then build and upload to server, if there is small changes of the application then you can't change directly on the server because the code is bundle and minified. I tried to search on google and watch tutorials but can't find it. I know there nothing wrong to build on local, however I like the point that while i'm building I know it works very well and see it on live then if there is small changes I could change directly.
Apologies to my curiosity. Thanks in advance for your ideas and correcting me.
I'm not sure if react requires bundling. It is not so big itself. One useful way that you can do it, just build your react app in local, then create a git repository, push it to there then from there you can pull it to your server by connecting your server with SSH.
This way may require some installations on server side again with SSH connection. You can search the details about the way I suggest you.
Appreciating your curiosity, I can think of two possible (not at all recommended though) solutions.
1. Dump jsx
React applications requires a build process primarily for JSX syntax. It is developer intuitive. If there is no jsx in your code no need to build. So, this jsx
return (
<h1>Greetings, {this.props.name}!</h1>
);
Should be written as this js
return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!');
2. Setup development environment in Server
This is a risky one. There're possible security issues.
Its like have a centralized code base on the server that anyone with access can modify.
Here, you can edit files & run build task directly on server.
Notes:
Today's basic development flow is code -> build -> deploy. Better stick with it for serious applications.
I'm currently working on a small AngularJS application to deploy on a web server, but I'm having a hard time understanding the difference between using Angular's startup seed compared to linking the script in the HTML, like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.js"></script>
I understand that using the startup seed lets you develop locally, but you can also link the script and download something like http-server to achieve the same effect, right?
So what are the benefits/drawbacks to using one startup method over another? Specifically, which would be more beneficial for hosting the app on a web server like Apache?
The benefit the seed adds is in configuration. They have done a lot of setup by creating and configuring a task runner to handle things like running a local web server, unit and e2e testing.
Without the seed you would have to set all of that up yourself from scratch. But if you don't care about testing, and you want to use your own local web server, then you don't need it.
Honestly if you are planning on hosting your even-remotely serious web app on a server, you have a lot more to worry about than what the seed provides.
You'll need a build process to concatenate all of your vendor and source code into a one large minified, obfuscated file for serving to the masses, for starters.
https://g00glen00b.be/angular-grunt/
I know that all these components exist, however I really am trying to figure out if someone has brought all these together.
Here is what I need:
JavaScript/NodeJS core application boilerplate/framework
With a website, HTML app (aka PhoneGap or even better Ionic), and ideally option to add something like a desktop app (like electron) client flexibility
All with possibility of different/specialized frontend code so all assets and HTML could be packaged into the app
Ideally kept in one GIT repo
With shared code amongst all UIs
Ability to use Angular 2 in all environments (or something similar)
Realtime? standardized data connection with data source (like meteor's DDP), I really dislike polling and I don't want to have to write my own data protocol
Have some kind of authentication capacity
Already exist in some way
What I have been eyeballing thus far is Ionic2 on top of Meteor, however it is remarkably difficult to find an actually working example of them playing together and I have not found any with separate codebases between the two interfaces.
To clarify, below is sort-of what I envision for a folder structure:
public/
common/
models/
business-logic/
server/
web/
desktop/
mobile/
And in that, all UIs and server can import from the common folder.
The end goal is to have something like Slack where they have 3 different ways of accessing the same data using the same rules but can really specialize in each interface type.
Does this exist?
I am really looking to have something that can be started with:
git clone http://github.com/a/bc
npm install
# do some other things that are documented
meteor run ios
Or am I not gonna have my cake and be able to eat it too?
I know I am shooting for the moon, but I know I can't be the first person looking to do this
For the backend I think that LoopBack may be a good bet if you want fast developement.
They have some examples for iOS, Android and Angular apps on their website:
You may get some ideas from their documentation or several example projects on GitHub.
LoopBack is currently backed by IBM.
I've written an AIML file for a chat bot and I'd like to build an interactive web application which allows me to chat with the bot in the web browser.
Is it possible to achieve this with HTML & Javascript?
There is no short answer on how to write a web application which allows a user to interact with your AIML. Writing such an application from scratch will be much more work then compiling the AIML was.
The easiest option would be to use a pre-built service like PandoraBots which allows you to upload AIML files and interact with them in the web browser. It's free to use the explorer part of website. They also have paid developer options which generates an API to bridge your AIML script and any applications you might want to build. It can be easily connected to work with common chat apps like Google talk ect.
If you decide to build everything from scratch you might want to check out the AIML Interpreter library for nodejs.
UPDATE: Here is a node.js based interpreter that you might find useful https://github.com/mrchimp/surly2
I was looking at AIML too and had similar questions. I just found RiveScript RiveScript and it looks like it fits your need to run javascript based on a match. It is not AIML, but very close. There is also at least one tool to convert from AIML to RiveScript, so I would say this fits your needs within those constraints.