trying to use servicestack https://github.com/NetCoreTemplates/angular-lite-spa and when execute: npm run dev
got this error. Is there any way to get more informative exeption?
Uncaught Error: Expected 'styles' to be an array of strings.
at assertArrayOfStrings (compiler.es5.js:3796)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15185)
at CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:15903)
at compiler.es5.js:15485
at Array.map (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15485)
at JitCompiler._loadModules (compiler.es5.js:26826)
at JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)
at JitCompiler.compileModuleAsync (compiler.es5.js:26728)
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
Please review ServiceStack's v5 changes for info about ServiceStack's new .NET Core Templates.
The templates are still being refined but I was able to download the angular-lite-spa repo and open the MyApp.sln in VS.NET 2017 which fetches both the server NuGet packages and runs npm install to fetch all the client npm dependencies, after waiting for all npm dependencies to be installed it calls Webpack to generate automatically the wwwrooot\index.html page which is when you can hit F5 to launch the Web App.
For large SPA projects npm can occaisionally have issues with loading some of its many dependencies which you can preview by looking at VS.NET's Output Window (Ctrl+Alt+O) and selecting Bower/npm Output Window from the dropdown. If the index.html was generated correctly and the Web App runs without JavaScript errors it means the project dependencies were successfully installed without issue.
The recommended way to develop with the new templates is with npm run watch (or run the 00-webpack-watch gulp task in VS.NET's Task Runner) which will run a Webpack watch build to re-generate any modified assets on the server. In ServiceStack v5 there's now a built-in hot-loader in DebugMode where it will monitor the server wwwroot folder for any changes and reload the page.
You can still develop with npm run dev but this launches the Webpack Dev Server at http://localhost:3000/ which also requires the backend .NET Core Web App running at http://localhost:5000/.
I've re-tested the latest angular-lite-spa Project on GitHub and all tasks are running without issue including npm run dev which was able to reload the page with TypeScript source file changes.
If you've got JavaScript errors running the default template it's likely due to a corrupted install which you can retry by deleting the node_modules/ folder and running npm install again and monitoring the console window for any issues.
Related
I'm completely new to web programming and have a very basic Angular.js app in JetBrains Webstorm IDE.
In Webstorm I can right-click on index.html file and choose Run/Debug and it will launch the app in Chrome with the debugger attached (I have chrome LiveEdit Jetbrains extension). This created a generic JavaScript Debug configuration. This is nice because it launches a chrome browser running my app automatically.
However, I was also able to run the app using npm start via JetBrains npm template. while I haven't explored it further, can probably also run the app using a Node.js template.
My question is that what is the difference between these launch methods?
How would I choose one rather than the other?*
It's nice that, for example, running index.html directly opens a chrome tab automatically. But what is the difference in doing this way over another? For local development, which one is better?
The application development landscape has been changing continuously
over the past few years, both on the client side (frontend) as well as
on the server side (backend). On the client side, we have plenty of
awesome new and updated JavaScript [and other scripting] frameworks;
and on the server side, we have new architectural approaches such as
single page applications(SPA), microservices, and serverless architectures.
The index.html is the main root file in your front-end & index.js is the main starting point of your backend. When you install Node on machine there is an npm which is node package manager which can install the project libraries and packages using 'npm install' based on the information on the package.json file. If you look into this file there is script part such as this:
"scripts": {
"start": "node ./index.js",
},
The project command starting with npm such as npm run start or npm run build ... can be found and define here.
When you start with your backed it initiated your project and load required templates. When you using IDE such as Webstorm, Visual Studio, or ... they build and run your entire project. So, by initiating and serving the index.html just you can see a part of front-end application and this running that you can see is what 'IDE's provide for you. For better understanding this process you can open project in a simple text editor such as Sublime text editor to understand the differences. So there are actually no difference in your context.
This was an general explanation that I hope could help but there are many other rooms to discuss.
newbie in node and reactjs. I created a sample application with create-react-app. I ran npm run build to build the project and once successfully built saw following .
what does the static server mean here. I am planning to build a app, not just static web pages. will these steps to build and deploy work, if I copy the build folder to my development box and ran the following commands.
do i need to install any web server for it work in a linux dev box? how does the deployment work in nodejs/linux work, compared to like in microsoft box , you have to install IIS web server then deploy the website under it.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
In the developing phase you can use npm start to start a dev server that auto reloads on changes. (Pretty neat).
When you want to host your app you should use the npm run build command and deploy it as a static website. You can use a basic Apache Server for that. Your build folder should contain an index.html and various js files that will be loaded when a user requests your website.
Voilá you hosted your react app ;)
I'm trying to start a NextJS application on my Node server using Plesk but it is not working. I activated NodeJS for my Plesk environment, and I was able to run npm install and npm build, but now, when I try to start the application, Plesk only shows "Please wait" and stays like that with no change, I have been waiting for more than 2 hours now, but I don't get any results, no errors, nothing.
The only issue I can think of is that, according to what I could find, the Application startup file and the package.json file should be in the same directory, the root folder, but in my case this is not possible. I have my package.json in the root directory, but the startup file for NextJS, index.js, is inside the pages folder. I tested building and starting the app locally and everything works fine, I don't understand why it's not working with Plesk.
I was able to fix this after correcting the startup file, it should be "node_modules/.bin/next" and not "pages/index.js".
Also when you start your app, Plesk will tell you to wait. Just check the site and make sure it is running, if it is, you can close Plesk.
You might need to install Express in your Next.js
You may refer to this repo fmi # https://github.com/zeit/next.js/tree/canary/examples/custom-server-express
If you're referring to the package.json's command we'll have:
dev
build
start
In Plesk's Node Application extension.
Website & Domains > "Your Domain" > Enable Node.js
Simply set server.js as my Application Startup File.
Ensure that all dependencies is installed using "Npm Install" helper.
You must run build command before start command.
Screenshot:
Helpful NPM/Plesk reference:
Running scripts in Node.js Application
Adding .npmrc file in Node.js Application Root folder
I pulled the tiles out of the starter kit here, https://github.com/eoverfield/sp-starter-kit. I get NO errors when I do 'npm install' and run 'gulp serve'. Everything works fine locally, but when I package the sppkg, I come up with the error below:
ERROR message when I put it in SPO
NPM and Node Version
I think it has to do with the versioning of my NPM and Node? Or maybe the 'launch.json' needs to have the directory rather than the localhost:4321? I am lost and any suggestions would be appreciated.
You need run gulp serve to test the solution(so the webpart could load the webpart js library from your local).
Or deploy your the solution to CDN or SharePoint library so the webarpt could load the webpart js from CDN or SharePoint library.
https://www.c-sharpcorner.com/article/sharepoint-framework-deploy-spfx-webparts-to-sharepoint-library/
Currently I made a simple app with react, it works perfectly and I use react-scripts. I installed React by following the Facebook github page, and it written that "When you're ready to deploy to production, running npm run build will create an optimized build of your app in the build folder. ". After I press npm run build, a folder build created, but I do not know what to do with this folder. I tried some method like, move all folders except build and npm run, but it did not work. Anyone can explain me what is this folder "build" ? Thank you
npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
npm run build creates a build directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.