By follow Angular2 example, I create my first app
under my project folder. I can run: "npm start" to make the application running
For example I can access the app from http://localhost:3000
I have a new requirement which I need to run the application under a context path, which mean I need to access the application through http://localhost:3000/myapp
The question is how to deploy or run Angular2 application in a sub folder path?
try to add in the index.html file. However, it seems Angular cannot resolve the path to find the template URL and resource JS and TS files.
Can anyone help to make sure I can run the app under a context path "myapp"?
Add base tag to index.html:
<base href="/myapp">
or in your bootstrap file (main.js)
import { provide } from '#angular/core';
import { APP_BASE_HREF } from '#angular/common';
bootstrap(AppComponent, [
provide(APP_BASE_HREF, {useValue: '/myapp'}),
]);
Related
really hoping someone can point me in the right direction with this one as i'm having no luck at all. I'm trying to host a simple nodejs sveltekit application on a Windows based azure app service, but cannot get the application to start / run.
I'm using the adapter-node adapter for sveltekit to generate the build output as a self contained node app. After sveltekit generates the build output I inject a simple package.json file to the root of the build folder to instruct node to use the ESM style imports which simply contains a single property of type="module".
package.json
{
"type": "module"
}
Lastly I also inject a web.config into the root of the build folder for use with IISNode. The web.config file used is the same as from the nodejs quickstart guide provided by MS. The web.config can be seen here.
The final folder structure of the build output is simply:
build
└───assets
│ └───_app
│ │ ...
└───prerendered
│ index.js
│ package.json
│ web.config
Locally I can take this build folder, place it anywhere on my machine and it runs perfectly by simply running:
node index.js
The Problem
Even though it works perfectly locally, when I deploy the application to the Azure app service the application will not start with the browser simply displaying "This page isn’t working right now".
When I check the logs I see the following error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\home\site\wwwroot\index.js
require() of ES modules is not supported.
require() of D:\home\site\wwwroot\index.js from D:\Program Files (x86)\iisnode\interceptor.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\home\site\wwwroot\package.json.
The error tells me that MS's iisnode\interceptor.js is using the commonjs style require syntax and cannot import the ES module of my index.js.
I found someone having a similar problem and a suggested solution here. The suggested solution is to create a new file next to my index.js file and configuring it as the app service's (or more specifically iisnode's) entry point in the web.config. The new file would be named run.cjs and only contain the following:
import("./index.js");
I tried this option, adding the new run.cjs file and updating the web.config to set this as IISNodes entry point:
<add name="iisnode" path="run.cjs" verb="*" modules="iisnode"/>
When I try the site after doing this I get a new problem. The site now loads but instead of seeing the app, the js from index.js renders as raw text into the browser.
The azure app service WEBSITE_NODE_DEFAULT_VERSION is set to ~14 and I can see from Kudu that the version running is 14.16.0 - my local machine is 14.17.0 so the node version looks to be ok.
Can anyone help??
Thanks in advance
Please re-install/update the npm module on your project.
Make sure all these files are present in your project.
Do not import your index.js file in other files like run.cjs or run.mjs, after building your application in your local and publish it in azure app service.
{
"type": "module"
}
This above code is required in the package.json file.
Check your npm reference files, if anyone of them is not installed properly, then you'll get the raw data which is present in app,js file, as output
I have setup react using NodeJS according to Link
Since I am learning React, I have to create multiple small projects. I am using create-react-app. This is causing:
Delay in creation of the app (Even when we have node installed while creating a previous app(s).
Allocation of ~200 MB for node_modules folder
Is it possible to reuse the dependencies created for one project, to be used in another?
I have tried copying node_modules from earlier projects to this one but I get following error while executing npm start
> products#0.1.0 start /Users/Deven/playground/React/test
> react-scripts start
internal/modules/cjs/loader.js:783
throw err;
^
Error: Cannot find module '../scripts/start'
in essence the softlinks to files are broken. Also copying node_modules is consuming space so I would like to reuse it.
I am able to get workaround using node_modules in the main app and reusing the same by creating sub-directories for each app in main. In the example I created app called mouseover
Create a main app using create-react-app command.
create-react-app main
It will have node_modules, public and src folders. The public and the src folders are small in size and we can create these for individual apps.
For new app, create a folder for app inside src directory of main.
cd main/src/
mkdir mouseover
Copy Sample public and src to the new folder.
cp -r ../../sample/src ./mouseover/
cp -r ../../sample/public ./mouseover/
Modify App.js to import App from `src/App' from new app folder and return it (index.js of main to consume)
sed -i '' 's/import App1 from .*/import App1 from \".\/mouseover\/src\/App\"/g' App.js
The App.js in main will look like following after importing App from new app and returning it.
import React from "react"
import "./App.css"
import App1 from "./mousehover/src/App"
function App() {
return (
<App1 />
)
}
export default App
Neutralinojs is really good thing. I trying write app using vue and neutralino. Vue without router working good. But if I add vue-router and httpVueLoader to project my app is not working.
I do following: write vue app and locate it in app folder of neutralino project. All files exclude index.html located in app/assets
Next I run http-server app/ and view my app in browser. All right, no errors in console. Next I run ./neutralino They open the browser, show my app page without a router-vue components and I see error in console:
It's look like neutralino client can't receive vue component c1.vue from server
You can download my neutralino project for reproduce this error
I have recently been tasked with integrating React + TypeScript with an existing starter app that contains many great Polymer Components (Predix UI Starter). I understand that this may seem non-sensical to some (after all, you could simply provide app state and logic using Polymer as a framework). However, the React library and the object oriented nature of TypeScript have a lot to offer, so what are some tips for getting started here?
I will be integrating the Predix UI Starter with the create-react-app starter. Specifically, I will enable a React Component to render() a px-dropdown polymer component. This concept and method can apply to any polymer starter app. This DOES NOT completely integrate these two starters, it is ONLY a POC for rendering a polymer component in a React render() method, using TypeScript.
Clone both of these repos. Work out of the Predix UI Starter - this will contain all of the components once you run npm install and bower install.
Ensure that the package.json in the Predix UI Starter contains all of the dependencies and devDependencies that the react app contains. In the package.json file, in the scripts object, change "start" : ..., to "start" : "react-scripts-ts start". This will serve the app to localhost using TypeScript (this is where the tsconfig.json and the tslint.json files come into play).
Copy the tsconfig.json, tslint.json, and the tsconfig.test.json files into the root directory of the Predix UI Starter.
As per the naming convention for React apps, rename the server folder to src. In the .bowerrc file, append public/ before bower_components, this will enable the public/index.html file to import polymer components generated by bower. Unless configured to do so, public/index.html will be unable to load polymer components in parent folders to the public folder. (The user may need to configure the Predix Starter to initially serve the public/index.html file).
From the react starter to the Predix starter, copy the App.tsx and the index.tsx files to the src folder, and copy the index.html file to the public folder (this file will be what the app initially serves).
Add the px-dropdown component to the JSX namespace so that you can render it within a react component by adding a global.d.ts file to the root directory with the following content:
declare namespace JSX {
interface IntrinsicElements {
'px-dropdown': any
}
}
You are now ready to render() the px-dropdown component. In the public/index.html file, import the component using the following two lines (within the <head> tag):
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/px-dropdown/px-dropdown.html" />
Let's pass some items to the props of the App Component. In the index.tsx file, edit the line that renders the component to look like <App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>
The following code in App.tsx will render the px-dropdown component successfully:
class App extends React.Component<any, any> {
constructor (props: any) {
super(props);
}
render() {
...
return (
<div className="App">
...
<px-dropdown
items={this.props.items}
sort-mode="key"
button-style="default"
display-value="Select"
disable-clear>
</px-dropdown>
</div>
);
}
}
You are now ready to begin rendering Polymer components using React + TypeScript.
I recently finished creating a Vue app that I wish to deploy on the internet. However, I can only open the project using node and running npm run dev. If I double click on the index.html file, I just see a blank page. How may I deploy my website so that the browser can render my Vue app?
If you used the vue-cli to generate the project, you should be able to run npm run build and get a minified, single .js file.
See here: http://vuejs-templates.github.io/webpack/commands.html
This will give you a dist folder with index.html and build.js. You should be able to open the html file and see your app.
Hoping it's usefull for someone, still:
Using #vue/cli 3, I had a simular result when copiing the dist to my localhost/test.
The build assumed all js and css file relative to the root while I was putting them relative to a subfolder 'test'.
adding the publicPath : "" did the trick to get rid of the preceeding '/'
in vue.config.js I added : ( using proxy for dev with apache/php )
module.exports = {
devServer: {
proxy: 'http://localhost:80/proxy'
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
output: {
publicPath : "" // only for prod
}
} else { // dev
// org, no changes
}
}
}
See also
https://alligator.io/vuejs/using-new-vue-cli-3/
https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config