We Keep Coding

Nuxt typescript building and transpile project for deployment

I have a Vue application built with the NuxtJS framework using the yarn create nuxt-app utility.
The application is meant to be for Server-Side-Rendering meaning it has to run on an actual server instance.
I am using Nuxt-ts to be able to use typescript with Nuxt, my nuxt.config.js looks like this:
export default {
ssr: true,
srcDir: 'src/',
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/stylelint
'#nuxtjs/stylelint-module',
],
server: {
port: envsConfig.env.ENV_CP_HTTP_PORT || 2055,
}
}
When building using nuxt-ts build, I get a folder .nuxt with the results of the build phase,
My scripts are:
"scripts": {
"dev": "nuxt-ts",
"build": "nuxt-ts build",
"start": "nuxt-ts start"
}
The question now, how can I deploy this on a server and run it using node?
Cuz running node .nuxt/dist/server/server.js doesn't seem to work, and I got confused.
Also, nuxt-ts seems to transpile in runtime, where I want my application to be built+transpiled then copy the results and run them using node,
Any help would be awesome!
Thanks

First, nuxt-ts isn't mandatory. It's only useful for .ts files not compiled by webpack (typically the nuxt.config.ts). If you have nuxt.config.js in vanilla javascript, you can stay with the standard nuxt binary (no the nuxt-ts).
But you can keep it if you want. I'm just saying it's not mandatory for nuxt in Typescript.
That say, run nuxt build, and it will bundle everything you need for production inside .nuxt folder.
All you have to do then is publish this folder, and run nuxt start to run the production server :)

How to package JS app in Azure Build Pipeline and Save in Separate C# Respository

TL;DR - Using two separate repositories (because that's how I've inherited them) I'm attempting to run a custom script to build a JS-only app that is then copied and deployed along with a C# API app that's housed in a second respository. Using Azure DevOps Services (cloud-based) for repos and pipelines.
As I've indicated above I'm working my way through the process of running these scripts to create a single .js file that's ready to be deployed with our API (the JS app is called and created by a variety of our applications using this API). My conundrum is how to approach this using Azure's Build Pipe as I can run the scripts but where the file(s) created are then being stored (and where to reference them) and then taking that file and inserting this creation into the repository of the C# API app, thereby kicking off a second build that would then deploy the C# app to the appropriate service.
In another JS project I've successfully copied the files in my build pipes to then push these 'builds' to the appropriate environments but I'm at a loss for copying a specific file, following the npm run build-prod step to save and then insert a file in a known static location to the second repository. NOTE: both repositories are located in the same organization.
Here's my uber rough draft YAML for the JS application:
trigger:
- master
pool:
vmImage: 'vs2017-win2016'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build-prod
displayName: 'npm install and build-prod'
- task: CopyFiles#2
inputs:
SourceFolder: '$(agent.builddirectory)/dist/'
Contents: '**'
TargetFolder: '$(build.artifactstagingdirectory)'
- task: PublishBuildArtifacts#1
inputs:
PathtoPublish: '$(Build.ArtifactStagingDirectory)/closet-api.js'
ArtifactName: 'closet-api.js'
publishLocation: 'Container'
Your help is appreciated!
12/2/2019 Minor Update
I've updated my YAML to appropriately run my custom build script (contained within the JS file) and grab the required file. Now the conundrum is a more thorough understanding on where exactly this file is located so, in another project in a separate build pipe, I may grab the .js file and use it in my C# project.
trigger:
- master
pool:
vmImage: 'vs2017-win2016'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: npm install
displayName: 'npm install'
- script: npm run build-prod
displayName: 'Run Build Script for Prod'
- task: CopyFiles#2
displayName: 'Copy client-api.js file to: $(Build.ArtifactStagingDirectory)'
inputs:
SourceFolder: '$(Build.SourcesDirectory)'
Contents: '**\dist\closet-api.js'
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts#1
inputs:
pathtoPublish: '$(Build.ArtifactStagingDirectory)'
artifactName: closet-api.js
Next update
Looks like grabbing the created .js file is easier than I anticipated in the C# project pipeline. Now I'm working out how to insert the file into the C# repo prior to the build for the C# project.
#Code from C# project grabbing published .js file
- task: DownloadPipelineArtifact#2
inputs:
buildType: 'specific'
project: #'(insert the .js project number here)'
definition: '7'
specificBuildWithTriggering: true
buildVersionToDownload: 'latest'
targetPath: '$(Pipeline.Workspace)'

After lots of trial and effort I've been able to finagle a workaround that appears to complete this stage of the project:
TL;DR
Download build artifact from the path I'd specified in the JS build pipe (in this case downloadPath: '$(System.ArtifactsDirectory)')
Copy file to specified file path within C# project and overwrite existing file
steps:
#Download JS app from published JS Build Pipe
- task: DownloadBuildArtifacts#0
inputs:
buildType: 'specific'
project: '(project identifier here)'
pipeline: '7'
buildVersionToDownload: 'latest'
downloadType: 'specific'
downloadPath: '$(System.ArtifactsDirectory)'
- task: CopyFiles#2
inputs:
SourceFolder: '$(System.ArtifactsDirectory)\folder-name-where-item-was-saved'
Contents: '**'
TargetFolder: '$(Build.SourcesDirectory)\directory\where\I\want\built\file'
OverWrite: true
Now I've got to begin the effort to trigger a pipeline from another pipeline, but that's another day and another dollar. Continuing on the redesign of our deployment process.

I think you need to create a third pipeline where you can download the artifacts from your C# API and your JS app, then you can organize them and deploy to target server. Here is an example for you:

How to rename react-native entry file (index.ios.js)

When I init a react-native project, index.ios.js is created as project entry file.
Can I change this file's name and if so, how?

When you start a react-native app you'll see this message output by the React Packager:
Running packager on port 8081
and then:
Looking for JS files in
/Users/gbirman/gil/mapily
React packager ready.
By this point, the packager has compiled your JS files and is serving them with the .js extension renamed to .bundle. For example, your index.io.js file is compiled and served from:
http://localhost:8081/index.ios.bundle
If you added another file foo.js in the same directory as index.ios.js, the packager would serve it from:
http://localhost:8081/foo.bundle
You can confirm this by opening that url in your browser.
Now to answer your question, your project has an iOS/AppDelegate.m file with the following line:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8081/index.ios.bundle"];
... as you can see, it loads the index.ios.bundle. You can change the path/filename there to whatever you want, but it's probably best to stick with the recommended approach of naming your entry file index.io.js

Suppose you've moved your index.ios.js into a folder called dist. You need to do two things
For your development environment: Update jsBundleURLForBundleRoot in AppDelegate.m to match your updated path.
For your release bundle: Open your Xcode project. You'll need to update the Bundle React Native code and images task under Build Phases for your project. Update the shell script in this section to look like below:
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh dist/index.ios.js
react-native-xcode.sh accepts the ENTRY_FILE as an optional first argument, defaulting to index.ios.js if none is found.
Updated Build Phases Example
Reference - react-native/scripts/react-native-xcode.sh

Working project structure that uses grunt.js to combine JavaScript files using RequireJS?

I have some projects that use RequireJS to load individual JavaScript modules in the browser, but I haven't optimized them yet. In both development and production, the app makes a separate request for each JavaScript file, and now I would like to fix that using Grunt.
I have tried to put together a simple project structure to no avail, so I'm wondering if someone can provide a working example for me. My goals are the following:
In development mode, everything works in the browser by issuing a separate request for each required module. No grunt tasks or concatenation are required in development mode.
When I'm ready, I can run a grunt task to optimize (combine) all of the JavaScript files using r.js and test that out locally. Once I'm convinced the optimized application runs correctly, I can deploy it.
Here's a sample structure for the sake of this conversation:
grunt-requirejs-example/
grunt.js
main.js (application entry point)
index.html (references main.js)
lib/ (stuff that main.js depends on)
a.js
b.js
requirejs/
require.js
text.js
build/ (optimized app goes here)
node_modules/ (necessary grunt tasks live here)
Specifically, I'm looking for a working project structure that I can start from. My main questions are:
If this project structure is flawed, what do you recommend?
What exactly needs to be in my grunt.js file, especially to get the r.js optimizer working?
If all of this isn't worth the work and there's a way to use the grunt watch task to automatically build everything in development mode every time I save a file, then I'm all ears. I want to avoid anything that slows down the loop from making a change to seeing it in the browser.

I use the grunt-contrib-requirejs task to build project based on require.js. Install it inside your project directory with:
npm install grunt-contrib-requirejs --save-dev
BTW: --save-dev will add the package to your development dependencies in your package.json. If you're not using a package.json in your project, ignore it.
Load the task in your grunt file with:
grunt.loadNpmTasks('grunt-contrib-requirejs');
And add the configuration to your grunt.initConfig
requirejs: {
production: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
out: "path/to/optimized.js"
}
}
}
Now you're able to build your require.js stuff into a single file that will be minimized with uglifyjs by running grunt requirejs
You can bundle a set of different tasks into some sort of main task, by adding this to your grunt file
grunt.registerTask('default', ['lint', 'requirejs']);
With this, you can simply type grunt and grunt will automatically run the default task with the two 'subtasks': lint and requirejs.
If you need a special production task: define it like the above
grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);
and run it with
grunt production
If you need different behaviors for 'production' and 'development' inside i.e. the requirejs task, you can use so called targets. In the configuration example above it's already defined as production. You can add another target if you need (BTW, you can define a global config for all targets by adding a options object on the same level)
requirejs: {
// global config
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js"
},
production: {
// overwrites the default config above
options: {
out: "path/to/production.js"
}
},
development: {
// overwrites the default config above
options: {
out: "path/to/development.js",
optimize: none // no minification
}
}
}
Now you can run them both at the same time with grunt requirejs or individually with grunt requirejs:production, or you define them in the different tasks with:
grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);
Now to answer your questions:
I would definitely use a subfolder in your project. In my case I use a 'src' folder for development that is build into a 'htdocs' folder for production. The project layout I prefere is:
project/
src/
js/
libs/
jquery.js
...
appname/
a.js
b.js
...
main.js // require.js starter
index.html
...
build/
... //some tmp folder for the build process
htdocs/
... // production build
node_modules/
...
.gitignore
grunt.js
package.json
see above
You can do so, but I wouldn't recommend to add requirejs to the watch task, it's a resource hungry task and it will slow down your machine noticeable.
Last but not least: Be very cautious when playing around with r.js. Especially when you want to optimize the whole project with r.js by adding a modules directive to your config. R.js will delete the output directory without asking. If it happens that it is accidentally configured to be your system root, r.js will erase your HDD. Be warned, I erased my whole htdocs folder permanently some time ago while setting up my grunt task... Always add keepBuildDir:true to your options when playing around with the r.js config.

How can I customize Jasmine's directory structure?

When using the Jasmine Rubygem, I find it extremely annoying that I have to conform to the generated directory structure which has a javascripts subfolder within the spec folder. I find it useless since I'm writing entirely in Javascript.
I find I can change this within the public folder by changing the generated jasmine.yml, however, this is not what I wanted since I still have to keep the javascripts folder with me.
Is there any way of customizing this folder structure?

Here's how I did this with jasmine gem 1.0.2.1:
1) Customize the jasmine_config.rb file to override the simple_config_file method to point to the correct yml file path. This file is initially generated at spec/javascripts/support/jasmine_config.rb. As seen on the github source (https://github.com/pivotal/jasmine-gem/blob/v1.0.2.1/lib/jasmine/config.rb), the method is hardcoded to use:
def simple_config_file
File.join(project_root, 'spec/javascripts/support/jasmine.yml')
end
I wanted to rename my 'spec' directory to 'test' so the top of my jasmine_config.rb file looks like this:
module Jasmine
class Config
def simple_config_file
File.join(project_root, 'test/javascripts/support/jasmine.yml')
end
end
end
2) Force rake to load the config file. I did this by adding the line:
require 'test/javascripts/support/jasmine_config.rb'
immediately after requiring jasmine in my Rakefile.
3) Update jasmine.yml (also in the support folder) to indicate where your javascript test files live. My yml file now ends with this:
# EXAMPLE:
#
# spec_dir: spec/javascripts
#
spec_dir: test/javascripts
Of course, you need to adjust that path "test" to be what you want.
I think this approach should work with the latest version of the gem, but this approach will break in the future if they change the interface of that Config class.

As of 2021, here's how to change the folder name when using the jasmine-browser-runner with NodeJS.
Install jasmine and setup the project:
npm install --save-dev jasmine-browser-runner jasmine-core
npx jasmine-browser-runner init
Rename the spec folder to test and edit jasmine-browser.json:
"specDir": "test"
Run the tests with this command:
npx jasmine-browser-runner runSpecs --config=test/support/jasmine-browser.json